我有一个看起来像这样的 api:
{
"id": 9,
"fullnames": "JOHN DOE",
"email": "johndoe@gmail.com",
"status": "Active",
"directreport": null,
"date_created": "2021-11-01T09:29:33.000+0000",
"date_updated": "2022-03-22T12:42:50.000+0000",
"view": true,
"lineManager": 43,
"accessLevel": "Level1",
"lastLogIndate": "06-Apr-2022 13:08:06",
"userPicture": "../media/strongnightstand.png",
}
userPicture 是指向服务器中存储所有图像的目录的链接。我试图将链接作为图像源,但图像不显示。我的构建文件位于 /var/www/html/stratex
并且我的服务器 conf 文件的文档根目录也是 /var/www/html/stratex
图片在/var/www/html/media
目录。我的代码如下所示:
const [avatar, setAvatar] = useState("");
useEffect(() => {
if(myuser) {
setName(myuser.fullnames);
setEmail(myuser.email);
setTeamId(myuser.team);
setId(myuser.id);
setAvatar(myuser.userPicture);
}
}, [myuser]);
<CardAvatar profile>
{ avatar == null || avatar == undefined || avatar === '' || avatar == "null" ? ( <img src={Avatar} alt="..." /> )
: avatar ? ( <img src={avatar} alt="..." /> )
: (<img src={Avatar} alt="..." /> )}
</CardAvatar>
将图像存储在数据库中不是一种选择,因为它们会减慢站点的速度。任何关于我做错的建议/帮助将不胜感激。谢谢
最佳答案
对于您的 React 项目,根级别位于 /stratex
没有什么比这更重要的了。
一个快速的解决方案是将图像存储在与您的 react 项目相同的根目录中。
/var/www/html/stratex/image/
并使用 ./media/strongnightstand.png
访问它.另一种选择是将您的媒体配置为独立服务器。
示例:
https://www.example.com/media/strongnightstand.png
这可能会使您的项目更加复杂,但对于大型项目来说,分离媒体存储是理想的选择。最后一个选项(类似于上面),是使用第三方服务(例如 cloudinary.com、AWS S3...)
关于javascript - 如何使用 reactjs 从服务器路径中检索图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71964740/