我有一个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
中,服务器配置文件的文档根目录也是/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>
在数据库中存储图片是不可行的,因为它们会减慢网站的速度。任何关于我做错了什么的建议/帮助都将不胜感激。谢谢
1条答案
按热度按时间cgyqldqp1#
对于您的React项目,根级别是
/stratex
,不能再高了。一个快速的解决方案是将映像存储在react项目所在的根目录中。并使用
./media/strongnightstand.png
访问它。另一个选项是将您的媒体配置为独立服务器。例如:
https://www.example.com/media/strongnightstand.png
这可能会使您的项目更加复杂,但理想情况是为大项目单独存储媒体。
最后一个选项(与上述选项类似)是使用第三方服务(例如cloudinary.com、AWS S3...)