URL图片仅在调整浏览器大小时显示

Question

我正在使用React.js和firebase。我正在从Firebase获取图像，并尝试在组件中进行渲染。

当图像URL可用时，我setState URL，但是图像仍然不显示。

componentDidMount(){
const that = this;
    firebase
      .storage()
      .ref("hero1.png")
      .getDownloadURL()
      .then(url => {
        console.log(url);
        that.setState({url})
      })
      .catch(error => {
        // Handle any errors
      });
}

//渲染图像

...
{ this.state.url &&
                this.state.slides.map((slide, index) => {
                  console.log(slide.imageUrl);   // url is being printed here
                  return (
                    <div
                      key={index}
                      onDragStart={this.handleOnDragStart}
                      className="slider-wrapper"
                    >
                      <div key={index} className="slider-content">
                          <img src={this.state.url} />   // when I set a hard-coded url, it works, but 
                                                         //does not work in state
                      </div>
                    </div>
                  );
                })}
...

还有一件事，当我调整浏览器大小时，图像立即显示出来。不知道为什么

Answer 1

尝试这个：

updateUrl = (url) => {
  this.setState({url})
}

componentDidMount(){
    const that = this;
    firebase
      .storage()
      .ref("hero1.png")
      .getDownloadURL()
      .then(url => {
        console.log(url);
        that.updateUrl(url);
      })
      .catch(error => {
        // Handle any errors
      });
}