如果src url为404，则呈现null

Question

我用SPA做反应

我有这个<img />组件

我从通过呈现<img />的功能组件的props创建的URL中拉出src

有时URL工作有时会返回404但我仍然渲染的img标签和默认的..缺少图像图标...

如果第一个URL无效，我如何使它不渲染或渲染一些随机透明的img（404）

Answer 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)
}

Answer 2

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