reactjs - 如果未找到图像，则响应更新状态。

Question

我似乎无法解决这个问题。我想做的是让 React 尝试验证图像没有返回 404 来显示替代图像。像下面这样的东西不起作用，因为 React 不会等待图像尝试加载以返回组件。

getInitialState: function () {
        var img = new Image();
        img.onerror = function() {
            img.src = "alternativeImage.jpg"
        },
        img.src = this.props.image;
        return {image: <img src={img.src} />};
    },

上面的代码可以很好地显示图像，但 404 替代图像不会显示。

我尝试将其放置在 getInitialState 之外的另一个方法中。我还尝试让它调用 React 组件之外的外部方法，但没有任何效果。

有一种在图像标签本身上添加 onerror 属性的快捷方法，但 React 似乎也有同样的问题，即不执行该代码和/或根据结果更新自身。

我认为最令人沮丧的部分是我似乎无法从 JavaScript 图像对象中调用 React 能够使用的任何函数。

感谢您提供的任何帮助。

Answer 1

这是我想出的一个解决方案。一般来说，对于 React 和编程来说还很陌生，所以对此持保留态度......

const DEFAULT_IMAGE="http://i.imgur.com/lL3LtFD.jpg"

<img src={this.props.SRC} onError={(e)=>{e.target.src=DEFAULT_IMG}}/>

警告:如果默认常量无效，浏览器将陷入无限循环(至少当我在 Chrome 中测试时)。 我还没有找到解决方案，但在普通 javascript 中，您将 onerror 属性设置为 null，这告诉浏览器仅对资源发出单个请求。
jQuery/JavaScript to replace broken images