react.js,node.js/express.js和amp;PostgreSQL。
我收集了一本书的图像,下载并将其存储在带有node.js的图像文件夹中的文件中,并将文件路径存储在我的postgreSQL数据库中,我希望在我的React前端的/code>标记中获取并显示图像。
虽然我可以在devtool-console中console.log Image对象,甚至可以用Image-Object作为JSON响应发出成功的邮递员请求,但我通过API从数据库中获取的图像并没有显示出来。此外,如果我转到localhost:3001/image-193x278.png,我甚至可以得到显示的图像。我的/code>标记甚至在devtools中显示了正确的Img src属性(imagesimage-193x278.png)
在devtool-console中,我得到以下错误:gethttp:/localhost:3002/images/image-193x278.png[HTTP/1.1 404找不到0ms]
(注意:我的前端在localhost 3002上运行,而我的服务器&;前端与3001上的代理同时运行,但这不是问题所在)
const [image, setImage] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('http://localhost:3001/test', {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
}
})
const data = await response.json();
console.log(data);
setImage(data);
}
fetchData();
}, []);
我尝试用两种不同的方式显示它:
<img className={css(styles.Image)} src={image.test_images} alt="" />
{image.map((img) =>
<img className={css(styles.Image)} src={img.test_images} alt="" />)}
app.get('/test', async (req, res) => {
try {
const image = await testdb.query('SELECT * FROM test_table');
res.json(image.rows);
} catch (err) {
console.error(err);
}
})
我提供了一个快速静态文件
app.use(express.static('images'));
我甚至尝试了另外两种变体以防万一
app.get('/test', express.static(__dirname + '../images'));
app.use(express.static('../images'));
还是没有成功。我希望我能尽可能地让别人理解我自己,我会非常感谢每一个给予我帮助的人。
问题出在静态文件夹上。静态文件将在
如果您想让它在路径下工作,那么您可以将路径添加到静态声明中,如下所示
app.use('/images', express.static('images'))
然后可以点击
您可以在这里找到文档:https://expressjs.com/en/starter/static-files.html