Question

我用SPA做反应

我有这个<img />组件

我从通过呈现<img />

的功能组件的道具创建的URL中提取src

有时URL工作有时会返回404，但img标签仍然呈现，并且使用默认的..缺少图像图标......

如果第一个URL无效（404），我怎样才能使它不呈现或呈现一些随机透明的img（404）

Answer 1

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

总结一下，就是听img的onerror事件，一旦你的网址返回404，就会触发onerror。

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

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

Answer 2

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

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

2 个答案: