Trạng thái cập nhật phản ứng nếu không tìm thấy hình ảnh.

Question

Tôi dường như không thể che giấu vấn đề này. Những gì tôi đang cố gắng làm là cố gắng React để xác minh một hình ảnh không trả về một 404 để hiển thị một hình ảnh thay thế thay thế. Một cái gì đó giống như dưới đây không hoạt động như React không chờ đợi cho hình ảnh để cố gắng tải cho trả lại các thành phần.

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

Mã trên sẽ hiển thị hình ảnh tốt nhưng hình ảnh thay thế 404 không hiển thị.

Tôi đã thử đặt phương thức này bằng phương thức khác ngoài getInitialState. Tôi cũng đã cố gắng để có nó gọi một phương pháp bên ngoài bên ngoài của các thành phần React, nhưng không có gì hoạt động.

Có một phương pháp ngắn tay để thêm thuộc tính onerror vào chính thẻ hình ảnh, nhưng có vẻ như React có cùng vấn đề không thực thi mã đó hoặc tự cập nhật dựa trên kết quả.

Tôi nghĩ rằng phần khó chịu nhất là tôi dường như không thể có bất kỳ chức năng nào gọi là React có thể làm việc với đối tượng hình ảnh JavaScript.

Cảm ơn bạn đã trợ giúp bạn có thể cung cấp.

Answer 1

Đó là thói quen xấu để đưa các thành phần vào trạng thái. Những gì bạn có thể muốn là một cái gì đó như sau:

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 liên kết: http://jsfiddle.net/e2e00wgu

Answer 2

Dưới đây là một giải pháp mà tôi đã đưa ra. Khá mới để phản ứng và lập trình nói chung để thực hiện việc này với một hạt muối ....

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

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

CẢNH BÁO: Nếu hằng số mặc định là không hợp lệ, trình duyệt sẽ bị bắt trong một vòng lặp vô hạn (ít nhất là khi tôi đã thử nghiệm điều này trong Chrome). Tôi chưa tìm thấy giải pháp cho điều này, nhưng trong vani javascript, bạn đặt thuộc tính onerror thành null, cho trình duyệt biết chỉ thực hiện một yêu cầu duy nhất cho nội dung đó.
jQuery/JavaScript to replace broken images