Görüntü bulunamazsa, güncelleme durumuna tepki verin.

Question

Kafamı bu sorun etrafında saracak gibi görünmüyor. Yapmaya çalıştığım şey, bir görüntüyü yerine alternatif bir görüntü görüntülemek için 404 döndürmediğini doğrulamak için React girişimi yapmaktır. React, bileşenin döndürülmesi için görüntü yüklemeye çalışmasını beklemediği için aşağıdaki gibi bir şey işe yaramıyor.

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

Yukarıdaki kod, görüntüleri iyi görüntüleyecek ancak 404 alternatif görüntüsü görünmeyecektir.

Bunu getInitialState dışında başka bir yöntemde yerleştirmeyi denedim. Ayrıca React bileşeninin dışında bir dış yöntem çağırmayı denedim, ancak hiçbir şey işe yaramıyor.

Görüntü etiketinin kendisinde onerror özniteliğinin eklenmesiyle ilgili kısa bir el yöntemi vardır, ancak React, bu kodu yürütmeme veya sonucu temel alarak kendisini güncelleştirmenin aynı sorunu gibi görünüyor.

En çok sinir bozucu olan kısım, React'ın JavaScript görüntü nesnesinden çalışabileceği herhangi bir işlevi göremediğimdir.

Sağladığınız her türlü yardım için teşekkür ederiz.

Answer 1

Bileşenleri duruma getirmek kötü bir alışkanlıktır.

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

Burada ile geldi bir çözüm nedir muhtemelen istediğiniz aşağıdaki gibi bir şeydir. .... Tepki ve genel olarak programlama böylece inanmayarak bunu al Pretty yeni

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

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

UYARI: Varsayılan sabit geçersizse, tarayıcı (en azından zaman ben sonsuz bir döngüye yakalanmış olacak bunu Chrome'da test ettim). Henüz buna bir çözüm bulamadım, ancak vanilla javascript'te, tarayıcıya öğenin yalnızca tek bir istekte bulunmasını söyleyen onerror özniteliğini ayarlarsınız.
jQuery/JavaScript to replace broken images