从 Express 后端在 Reactjs 中显示图像

如何解决从 Express 后端在 Reactjs 中显示图像

这是我从后端收到的数据。我想使用 Reactjs 在前端显示 图像。简单地这样做是行不通的。 <figure><img src={image} alt="" /></figure>。 我不知道该怎么做。

address: "Anarkali Bazar London"  
availableDate: "2021-07-07T00:00:00.000Z"  
companyName: "realme"  
description: "hello"  
image: "image_1626778257560.jpg"  
isAvailable: true  
pricePerDay: 8  
productTitle: "product"  
state: "London"  
userId: "60f65fe9af2bc10004fc29ec"  
__v: 0  
_id: "60f6aa925ded840004691150"  

解决方法

我认为您需要做的就是指定图像的路径。

<figure><img src={`path/to/image/${image}`} alt="" /></figure>

,

你应该看看这个 How to Fetch and Display an Image from an express backend server to a React js frontend? 它解决了你的问题。 注意事项

1. 确保将图像作为 blob 发送，即当 React 将图像发送到 express 服务器时，确保将其转换为图像/blob 格式。这将确保您确实获得了 blob/文件/图像格式。

2. 理想情况下，这是您必须解决上述问题后的建议。考虑将图像上传到 Cloudinary 等图像托管服务，并仅保存数据库中的链接，从而使您的初始方法能够工作。