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

bmvo0sr5  于 2023-08-04  发布在  Node.js
关注(0)|答案(2)|浏览(119)

你好,我正在处理我的fyp,我是新的Reactjs和节点js我已经成功地将我的图像存储在mongoDB数据库中,当我上传图像时,图像存储在本地存储中,在我的情况下,它存储在一个名为“上传”的文件夹中,图像的名称存储在数据库中,当我尝试通过给出本地存储的图像+的路径来获取图像时名称存储在数据库中,它不显示任何图像,而是显示一个破碎的图像。图像的名称被存储在变量名“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

字符串

zfycwa2u

zfycwa2u1#

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

esbemjvw

esbemjvw2#

这是因为你的上传文件夹不是公开访问。因此,要解决这个问题,您必须在Express中将文件夹作为静态文件提供。
在nodejs中尝试:
app.use('/uploads',express.static('uploads '))

相关问题