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

【问题标题】：URL Image only shows when browser resizedURL 图片仅在浏览器调整大小时显示
【发布时间】：2020-02-12 13:41:12
【问题描述】：

我正在使用React.js 和firebase。我正在从 firebase 获取图像并尝试在组件中呈现它。

当图片URL可用时，我setStateURL，但图片仍然没有显示。

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

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

【问题讨论】：

不推荐使用索引作为键，您可以尝试使用索引+URL。

标签： reactjs firebase firebase-storage

【解决方案1】：

试试这个，我从子 div 中删除了 key 并将另一个 key 更新为 slide.imageUrl:

{ this.state.url &&
                this.state.slides.map((slide, index) => {
                  console.log(slide.imageUrl);   // url is being printed here
                  return (
                    <div
                      key={slide.imageUrl}
                      onDragStart={this.handleOnDragStart}
                      className="slider-wrapper"
                    >
                      <div 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>
                  );
                })}

【讨论】：

我有另一个版本。试试这个。
没有成功。我认为问题在于 img src 未更新。因为 url 正在控制台中显示
根据keikai的评论，我有另一个想法
我不知道了。您的错误表明 url 更改后不会发生重新渲染。但是如果组件的状态发生变化，它应该重新渲染。这就是我在第一次迭代中尝试解决的问题。
你是对的，但这是由于图书馆（发布了答案）。谢谢你的帮助兄弟。

【解决方案2】：

我使用库 (react-alice-carousel) 来渲染图像幻灯片。这引起了问题。只需将库切换到 react-animated-slider，它就可以工作了。谢谢大家帮助我和你的时间。

【讨论】：