未定义的反应图像源-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 来自 undefined。它在第二次运行时定义。

因此 AWS 会针对 noSuchKey

抛出错误

/Users/timbogdanov/Desktop/hlam/server/node_modules/AWS-SDK/lib/request.js:31 throw err; ^

NoSuchKey: The specified key does not exist.

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

谢谢！

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"/>
}