React.js,Node.js / Express.js和PostgreSQL
我刮了一本书的ImageUrl,下载并使用Node.js将其存储在图像文件夹中的文件中,并将文件路径存储在我的postgreSQL数据库中,我想<img />
在React前端的标签中获取并显示图像。
即使我可以在devtool-console中console.log图像对象,甚至通过图像对象作为JSON响应发出成功的Postman请求,也无法显示通过API从数据库中获取的图像。此外,如果我转到localhost:3001 / image-193x278.png,甚至可以显示该图像。我的<img />
标签甚至在devtools中显示了正确的Img src属性(images \ image-193x278.png)
在devtool控制台中,出现以下错误:GEThttp:// localhost:3002 / images / image-193x278.png [HTTP / 1.1 404 Not Found 0ms]
(注意:我的前端在本地主机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);
}
})
我提供Express静态文件
app.use(express.static('images'));
我什至尝试了另外两个变体,以防万一
app.get('/test', express.static(__dirname + '../images'));
app.use(express.static('../images'));
仍然没有成功。我希望我能使自己尽可能地被理解,并且我将为我提供的每一个帮助深表谢意。
问题出在您的静态文件夹上。静态文件位于localhost:3002/:filename
。
如果要使其在/images
路径下工作,则可以将路径添加到静态声明中,例如
app.use('/images', express.static('images'))
然后您就可以打了localhost:3002/images/:filename
。
您可以在这里找到文档:https : //expressjs.com/en/starter/static-files.html
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句