你好,我正在处理我的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
字符串
2条答案
按热度按时间zfycwa2u1#
你的API后端是什么?在那里找不到图像,因为您可能没有提供静态图像资产。
esbemjvw2#
这是因为你的上传文件夹不是公开访问。因此,要解决这个问题,您必须在Express中将文件夹作为静态文件提供。
在nodejs中尝试:
app.use('/uploads',express.static('uploads '))