छवि लोड करते समय डिफ़ॉल्ट तत्व दिखाएं

Question

मेरे पास एक घटक अवतार का प्रतिनिधित्व करने वाला घटक है जो मेरे एपीआई से एक छवि लोड करता है। मैं अवतार लोड होने के दौरान एक डिफ़ॉल्ट अवतार (एक और छवि नहीं) प्रदर्शित करना चाहता हूं।

constructor() { 
    super(); 
    this.state = { 
    loaded: false, 
    }; 
} 

render() { 
    if (!this.props.uri || !this.state.loaded) { 
    return (
     <DefaultAvatar /> 
    ); 
    } 
    return <Image onLoad={this.onLoad.bind(this)} uri={this.props.uri} />; 
} 

onLoad() { 
    this.setState({loaded: true}); 
} 

समस्या मेरे पास है कि यह वर्तमान कोड के साथ, Image प्रदान की जा कभी नहीं होगा, इसलिए राज्य कभी नहीं बदलेगा है। मैं ऐसे समाधान को खोजने में असमर्थ हूं जो प्रतिक्रिया सिद्धांतों और मेरी आवश्यकताओं को पूरा करेगा (इसे प्रदर्शित करने से पहले छवि लोड करने के लिए कोई भूत घटक नहीं)।

Answer 1

Image.prefetch मुझे हर किसी के लिए मैं क्या चाहते हैं, धन्यवाद करने की अनुमति देगा।

Answer 2

class LazyImage extends React.Component{ 
    constructor() { 
    super(this.props) 
    this.state = {loaded: false} 
    } 

    handleLoad() { 
    this.setState({loaded:true}) 
    } 

    componentDidMount() { 
    this.img = new Image() 
    this.img.onload = this.handleLoad.bind(this) 
    this.img.src = this.props.src 
    } 

    render() { 
    return this.state.loaded?<img src={this.props.src}/>:<div>Loading...</div> 
    } 
} 

आप मूल Image तत्व बनाते हैं और इसे लोड करने की प्रतीक्षा करते हैं। फिर आप प्रतिक्रिया के साथ छवि प्रस्तुत करते हैं। ब्राउज़र स्मार्ट है और इसे इस बार कैश से लाता है। तत्काल प्रस्तुत करें!

डेमो के लिए http://jsfiddle.net/4hq3y4ra/3/ देखें।

Answer 3

चीजों को सरल रखने के लिए कई तरीके हैं, हालांकि आप डिफ़ॉल्ट अवतार और वास्तविक छवि को टॉगल करने के लिए एक शाब्दिक स्थिति का उपयोग कर सकते हैं।

constructor() { 
    super(); 
    this.state = { 
    loaded: false, 
    }; 
} 

onLoad(dataUri) { 
if(dataUri !== undefined){ 
    this.setState({loaded: true}); 
    } 

}, 

render() { 

    return (
      <Image onLoad={this.onLoad} uri={this.state.loaded ? this.props.uri : 'default-avatar'} /> 
     ); 

}