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

Question

简短设置、问题和代码摘要

设置

React.js、Node.js/Express.js 和 PostgreSQL。

我抓取一本书的 ImageUrl，使用 Node.js 下载并将其存储在图像文件夹中的文件中，并将文件路径存储在我的 postgreSQL 数据库中，并且我想在 <img /> 中获取并显示图像。我的 React 前端上的标签。

问题

尽管我可以在 devtool 控制台中 console.log 图像对象，甚至使用图像对象作为 JSON 响应发出成功的 Postman 请求，但通过 API 从数据库获取的图像不会显示。 此外，如果我转到 localhost:3001/image-193x278.png，我什至可以显示图像。 我的<img />标签甚至在开发工具中显示了正确的 Img src 属性 (images\image-193x278.png)

在 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