如何为img标签设置默认图像，以防src在react中无效

Answer 1

我面临这个问题，在任何地方都找不到可行的解决方案，但我能够理解一个简单的解决方案。你可以简单地这样做。

首先，您可以像这样使用 useState 并给出您想要的图像。

const [imgSrc, setImgSrc] = useState("Invalid Image Source");

然后，在您的图像组件中，您可以简单地执行此操作。 （确保 onError 拼写正确）

<img src={imgSrc} onError = {() => setImgSrc("https://picsum.photos/200")} />

在 setImgSrc() 中提供您想要的默认图像。

希望这对您有帮助！

Answer 2

我认为这种方式比在 useState 中设置新值要快得多 ${apiUrl}/suppliers/${item?.image}} alt=“供应商” className =“大小-[80px]圆形lg边框” onError={ev => { ev.target.src='../../public/image-off.png' ev.onerror=null; }} />