Aktualisierungsstatus reaktivieren, wenn Bild nicht gefunden wurde.

Question

Ich kann mich nicht um dieses Problem kümmern. Was ich versuche zu tun, ist React Versuch zu überprüfen, dass ein Bild keine 404 zurückgibt, um stattdessen ein alternatives Bild anzuzeigen. Etwas wie das Folgende funktioniert nicht, da React nicht darauf wartet, dass das Bild versucht, die Komponente zurückzugeben.

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

Der obige Code zeigt die Bilder gut an, aber das alternative Bild 404 wird nicht angezeigt.

Ich habe versucht, dies in einer anderen Methode außerhalb von getInitialState zu platzieren. Ich habe auch versucht, eine externe Methode außerhalb der React-Komponente aufzurufen, aber nichts funktioniert.

Es gibt eine Kurzhandmethode, um das onerror-Attribut auf dem Image-Tag selbst hinzuzufügen, aber es scheint, dass React das gleiche Problem hat, diesen Code nicht auszuführen und sich selbst basierend auf dem Ergebnis zu aktualisieren.

Ich denke, der frustrierendste Teil ist, dass ich nicht scheinen kann, irgendeine Funktion genannt zu haben, dass React mit dem JavaScript-Bildobjekt arbeiten könnte.

Vielen Dank für Ihre Hilfe.

Answer 1

Es ist eine schlechte Angewohnheit, Komponenten in den Status zu setzen. Was Sie wahrscheinlich wollen, ist so etwas wie die folgenden:

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

Hier ist eine Lösung, die ich kam mit. Ziemlich neu im Allgemeinen zu reagieren und Programmierung so nehmen diese mit einem Körnchen Salz ....

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

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

WARNUNG: Wenn das Standard-Konstante ungültig ist, wird der Browser in einer Endlosschleife gefangen werden (zumindest wenn ich getestet in Chrome). Ich habe noch keine Lösung gefunden, aber in Vanille Javascript, setzen Sie das onerror Attribut auf null, das den Browser anweist, nur eine einzige Anfrage für das Asset zu machen.
jQuery/JavaScript to replace broken images