从 mongoDB 获取后，图像未显示在前端

Question

您好，我正在研究我的 fyp，我是 React js 和 Node JS 的新手，我已成功将图像存储在 mongoDB 数据库中，当我上传图像时，图像存储在本地存储中，在我的情况下，它存储在文件夹中名为“uploads”，图像的名称存储在数据库中，当我尝试通过提供本地存储的图像的路径+存储在数据库中的名称来获取图像时，它不显示任何图像，而是显示损坏的图像。图像的名称存储在变量名称“profileImage”中，并且可以正确从数据库中检索。不知道这里有什么问题可以指导我。附上输出和代码的屏幕截图以供参考。

前端代码并获取 api

import React, { useEffect,useState } from 'react';
import {useHistory} from "react-router-dom";
import axios from 'axios'


const About = () =>{
const history = useHistory();

const [id, setID] = useState('');
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [work, setWork] = useState('');
const [profileimage, setPimage] = useState('');


const CallAbtPageA=()=>{
  axios.get('/about')
  .then((res) => {
    setID(res.data.id);
    setName(res.data.name);
    setEmail(res.data.email);
    setPhone(res.data.phone);
    setWork(res.data.work);
    setPimage(res.data.photo);
  })
  .catch((error) => {
    console.log(error);
    history.push('/login');
  });

}


useEffect(()=>{
  CallAbtPageA();
});

  return(
  <div>
    <form method="GET"  encType="multipart/form-data">
      <div> <h1 style={{display:'inline',color:'black'}}>ID:</h1>    <p style={{display:'inline',fontSize:"35px"}}>{name}</p> </div>
      <div> <h1 style={{display:'inline',color:'black'}}>Name:</h1>    <p style={{display:'inline',fontSize:"35px"}}>{name}</p> </div>
      <div> <h1 style={{display:'inline',color:'black'}}>EMAIL:</h1>    <p style={{display:'inline',fontSize:"35px"}}>{email}</p> </div>
      <div> <h1 style={{display:'inline',color:'black'}}>PHONE:</h1>    <p style={{display:'inline',fontSize:"35px"}}>{phone}</p> </div>
      <div> <h1 style={{display:'inline',color:'black'}}>WORK:</h1>    <p style={{display:'inline',fontSize:"35px"}}>{work}</p> </div>
    </form>
    <div> <h1 style={{display:'inline',color:'black'}}>PROFILE PIC:</h1> <img src = {`./uploads/${profileimage}`}  /> </div>
  </div>
)
 }

 export default About;``` 



[![Screenshot of output][1]][1]

  [1]: https://i.stack.imgur.com/oWtw4.png

[![Screenshot of Response is in below link][2]][2]

  [2]: https://i.stack.imgur.com/pVPfi.png

Answer 1

你的API后端是什么？在那里找不到图像，因为可能您没有提供静态图像资源。

Answer 2

这是因为您的上传文件夹未公开访问。因此，要解决此问题，您必须在 Express 中将该文件夹设置为静态。

在nodejs中尝试一下：

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

Answer 3

我也面临着完全相同的问题。有人找到解决办法了吗🤔？