图像在网络“预览”中正确显示，但在其响应中。数据都是破碎的乱码

Question

我的问题如下

/uploads/{userid}/

里面有一个我命名为

user-pf.png

的图像，我可以正确访问该文件夹并从中检索图像，但我的前端无法正确显示它，即使它可以“看到”图像正确，如下图所示。

这是我在前端 (REACT) 和后端 (NodeJS) 上的代码

import api from '../../service';
  const myProfile = () => {
  const { user, updateUser } = useUser();
  const [foto, setFoto] = useState(PlaceholderPicture);

useEffect(() => {
   if (user) {
     api
      .get(`/uploads/${user.id}/user-pf.png`)
      .then((response) => {
         console.log('response', response);
         setFoto(response.data);
   })
       .catch((error) => {
             console.error('Error fetching image:', error);
    );
    }
[user]);

...
<img
       className="my-picture"
       src={foto ? foto : PlaceholderPicture}
       alt="Profile"
/>

//nodejs

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

我尝试将response.data转换为二进制并使用它，但它也不起作用，因为它看起来不像是二进制的。

我也尝试将图像保存在数据库中，但它无法正常工作，这让我很头痛，所以我采用了更简单的方法，但图像现在无法正确显示。

我不知道还能做什么，我尝试了 youtube 视频，它们都与我的实现类似，但在这里不起作用

Answer 1

您似乎使用

axios

，所以您可以告诉

axios

将图像作为

blob

获取图像，然后使用

URL.createObjectURL

创建字符串并将其分配给

img

标签：

// change your `api` service to recieve config parameter
    axios
      .get(`/uploads/${user.id}/user-pf.png`, {
            responseType:'blob'
          })
      .then((response) => {
        console.log('response', response);
        setFoto(URL.createObjectURL(response.data));
      })
      .catch((error) => {
          console.error('Error fetching image:', error);
        );
      }

或者您可以简单地将

/uploads/${user.id}/user-pf.png

分配给

img

标签