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链接：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

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

2 个答案: