反应图像 src 未定义 - AWS S3

Question

我有一个：

<img src={ "http://127.0.0.1:5001/api/users/profile_photo/" + user.profile_photo }
     className="img-fluid rounded-circle"
     alt="rounded image"/>

每当我在页面中加载时，函数getUser() 就会运行并检索用户。

const getUser = async () => {
  let user = await axiosWithAuth().get('/users/' + userId);
  setUser(user.data);
};

user.profile_photo 是我从 AWS s3 取回的密钥。前任。 43256722324654

问题： 当页面加载时，图像 src 尚未设置为它的样子，因为在 express 后端，profile_photo 来自未定义。它在第二次循环时被定义。

因此，AWS 会为 noSuchKey 抛出错误

/Users/timbogdanov/Desktop/hlam/server/node_modules/AWS-SDK/lib/request.js:31 抛出错误； ^

NoSuchKey：指定的键不存在。

在设置用户状态对象之前，有什么方法可以阻止图像发送获取请求？

谢谢！

Answer 1

添加渲染图像的条件。如果user.profile_photo 未定义，则不要渲染它。

{user.profile_photo && <img src={ "http://127.0.0.1:5001/api/users/profile_photo/" + user.profile_photo }
     className="img-fluid rounded-circle"
     alt="rounded image"/>
}