javascript - 如何在 React 中显示图像，这些图像作为文件下载并保存在服务器上的文件夹中，文件路径存储在我的数据库中？

Question

简短设置、问题和代码摘要
设置
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 (images\image-193x278.png) 中显示了正确的 Img src 属性
在 devtool-console 中，我收到以下错误:
GEThttp://localhost:3002/images/image-193x278.png
[HTTP/1.1 404 未找到 0ms]
(注意:我的前端在 localhost 3002 上运行，而我的服务器和前端与 3001 上的代理同时运行，但这不是导致问题的原因)
代码
react 代码

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

仍然没有成功。
我希望我能让自己尽可能地被理解，我会非常感谢我所提供的每一个帮助。

Answer 1

问题在于您的静态文件夹。静态文件位于 localhost:3002/:filename .
如果你想让它在 /images 下工作路径，然后您可以将路径添加到静态声明中，例如

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

然后你可以打 localhost:3002/images/:filename .
您可以在此处找到文档: https://expressjs.com/en/starter/static-files.html