如何在 React 中动态设置 <img /> src，而不会在渲染时抛出 404 错误？

Question

const Foo = () => {
const [src, setSrc] = useState('')

useEffect(() => {
setSrc('someEndPoint.jpg')
}, [])
return <img src={apiUrl + src}>
}

使用此实现，组件将在渲染时获取src。但在此之前，img将通过尝试获取api的根来抛出404。有什么办法可以防止这种情况发生吗？

Answer 1

您可以在src可用时进行渲染；

请尝试以下操作：

return src && <img src={apiUrl + src} />