Question

我有一个代表用户头像的组件，它从我的API加载图像。我希望它在加载头像时显示默认头像（而不是另一个图像）。

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永远不会被渲染，因此状态永远不会改变。我无法找到满足React原则和我的要求的解决方案（在显示之前没有加载图像的ghost组件）。

Answer 1

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 2

有几种方法可以实现，但为了简单起见，您可以使用文字条件切换默认头像和实际图像。

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

}

Answer 3

Image.prefetch将允许我做我想做的事，感谢大家。

加载图像时显示默认元素

3 个答案: