如果找不到图像,则反应更新状态.

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来替换破碎的图像