如果 <img /> src url 为 404，则呈现 null答案

【问题标题】：Render null if <img /> src url is 404如果 <img /> src url 为 404，则呈现 null
【发布时间】：2018-07-02 16:48:03
【问题描述】：

我将 react 用于 SPA

我有这个<img /> 组件

我从通过渲染<img /> 的功能组件的道具创建的 URL 中提取 src

有时 URL 可以工作，有时它会返回 404，但我仍然渲染了 img 标签，并且带有默认的 .. 缺少图像图标 ...

如果第一个 URL 无效 (404)，我如何使它不呈现或呈现一些随机透明的 img

【问题讨论】：

stackoverflow.com/questions/14651348/… 可能相关
你可以发布img组件吗？
不知道为什么这个问题被否决了。我发现它非常有用...

标签： javascript image reactjs

【解决方案1】：

正如@Sterling Archer 所说，您的问题与Checking if image does exists using javascript 有关。

总结起来就是监听img的onerror事件，一旦你的url返回404，就会触发onerror。

const onError = () => {
    this.setState({ urlError: true })
}

render() {
    return (this.state.urlError ? <img onerror={this.onError} /> : null)
}

【讨论】：

【解决方案2】：

您可以执行 cors xhttp 请求来确定状态是否为 404，然后设置状态布尔值。使用这个 bool 来选择是渲染图像还是返回 null

【讨论】：