如何使用 reactjs 从服务器路径检索图像

Question

我有一个 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 是 link 服务器中存储所有图像的目录。我试图将 link 作为图像源，但图像不显示。我的构建文件在 /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>

将图像存储在数据库中不是一种选择，因为它们会降低站点速度。任何关于我做错的 advice/help 将不胜感激。谢谢

Answer 1

对于您的 React 项目，根级别位于 /stratex，没有比这更高的了。一个快速的解决方案是将图像存储在与您的 React 项目相同的根目录中。

/var/www/html/stratex/image/

并使用 ./media/strongnightstand.png 访问它。

另一种选择是将您的媒体配置为独立服务器。示例：https://www.example.com/media/strongnightstand.png

这可能会使您的项目更加复杂，但对于大型项目来说，分离媒体存储是理想的选择。

最后一个选项（与上述类似）是使用第三方服务（例如 cloudinary.com、AWS S3...）

如何使用 reactjs 从服务器路径检索图像

How to retrieve images from server path using reactjs

javascript

centos

reactjs