如果找不到图像，则反应更新状态。

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 也有不执行该代码和/或根据结果更新自身的相同问题。

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

感谢您提供的任何帮助。

Answer 1

将组件放入状态是一个坏习惯。您可能想要的是如下内容：

var Img = React.createClass({

    componentDidMount: function () {

        var self = this;
        var img = new Image();
        img.onerror = function () {
            self.setState({ src: 'http://i.imgur.com/lL3LtFD.jpg' });
        };

        img.src = this.state.src;

    },

    getInitialState: function () {    
      return { src: '/404.jpg' };
    },

    render: function () {
        return <img src={this.state.src} />;
    }

});

jsfiddle link: http://jsfiddle.net/e2e00wgu

Answer 2

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

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

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

警告：如果默认常量无效，浏览器将陷入无限循环（至少当我在 Chrome 中对此进行测试时）。我还没有找到解决这个问题的方法，但是在 vanilla javascript 中，你将 onerror 属性设置为 null，它告诉浏览器只对资产发出一个请求。
jQuery/JavaScript to replace broken images

如果找不到图像，则反应更新状态。

React update state if image not found.

reactjs