如何为 img 标签设置默认图像，以防 src 链接在 React 中无效？
我尝试过像这样使用onerror，但它似乎不起作用。
我正在使用 Next.js 和钩子(Hook)。
<img alt="Site Logo" src="/secondary.jpg" onerror="this.onerror=null; this.src='https://static.thenounproject.com/png/140281-200.png';" />
所谓无效，是指当 src 接收到 URL 并且找不到图像时，我想让它显示默认图像。
当找不到图像时会显示此图像
如果无法从提供的 URL 中找到图像，我希望让它显示默认图像。
通常，这可以通过上面的 onerror 来完成，但由于某种原因它在 React 中不起作用，替代解决方案是什么？
最佳答案
我遇到了这个问题，在任何地方都找不到可行的解决方案，但我能够理解一个简单的解决方案。您可以简单地执行此操作。
首先，您可以像这样使用 useState 并给出您想要的图像。
const [imgSrc, setImgSrc] = useState("Invalid Image Source");
然后，在您的图像组件中，您可以简单地执行此操作。 (确保 onError 拼写正确)
<img src={imgSrc} onError = {() => setImgSrc("https://picsum.photos/200")} />
在 setImgSrc() 中提供您想要的默认图像。
希望这对您有帮助!
关于reactjs - 如何为 img 标签设置默认图像，以防 src 在 React 中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69545803/