Resim yüklenirken varsayılan öğeyi göster Resim

Question

API'mdan bir görüntü yükleyen bir kullanıcı avatarını temsil eden bir bileşenim var. Avatar yüklenirken varsayılan bir avatarı (başka bir görüntüyü değil) görüntülemesini istiyorum.

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}); 
} 

Ben sorun bu akım koduyla, Image hale asla, bu nedenle devlet asla değişmeyecek olmasıdır. React ilkelerini ve gereksinimlerimi tatmin edecek bir çözüm bulamıyorum (görüntüyü görüntülemeden önce yüklemek için hayalet bileşenler yok).

Answer 1

Image.prefetch beni herkese, ne istiyorum teşekkür yapmanızı sağlayacaktır.

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> 
    } 
} 

Yerel bir Image unsuru oluşturmak ve yüklenmesini bekleyin. Ardından görüntüyü tepkiyle elde edersiniz. Tarayıcı akıllıdır ve bu sefer önbellekten alır. Anında render!

Bir demo için bkz. http://jsfiddle.net/4hq3y4ra/3/.

Answer 3

Bunun başarılabilmesi için birkaç yol vardır, ancak işleri basitleştirmek için varsayılan avatarı ve gerçek görüntüyü değiştirmek için bir hazır koşul kullanabilirsiniz.

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'} /> 
     ); 

}