时间戳

首页 > 解决方案 > URL 图片仅在浏览器调整大小时显示

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

问题描述

我正在使用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>
                  );
                })}
...

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

标签： reactjsfirebasefirebase-storage

解决方案

试试这个，我从子 div 中删除了键并将另一个键更新为 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>
                  );
                })}

推荐阅读