如何在React中显示以文件形式下载并保存在服务器上的文件夹中且文件路径存储在数据库中的图像?

X计划

简短的设置,问题和代码摘要

设定

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'));

仍然没有成功。我希望我能使自己尽可能地被理解,并且我将为我提供的每一个帮助深表谢意。

林克什(Rinkesh Golwala)

问题出在您的静态文件夹上。静态文件位于localhost:3002/:filename

如果要使其在/images路径下工作,则可以将路径添加到静态声明中,例如

app.use('/images', express.static('images'))

然后您就可以打了localhost:3002/images/:filename

您可以在这里找到文档:https : //expressjs.com/en/starter/static-files.html

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档