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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了URL图片仅在调整浏览器大小时显示相关的知识,希望对你有一定的参考价值。

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

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

答案

尝试这个:

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

以上是关于URL图片仅在调整浏览器大小时显示的主要内容,如果未能解决你的问题,请参考以下文章

调整图像大小并显示而不保存

调整浏览器大小时,如何优先显示首先显示的列?

WPF:调整图像大小,但仅在用户调整UI大小时

多个 Google 地图和引导选项卡仅在窗口调整大小时呈现

调整图像大小后检测公差颜色

为啥背景图片没有填满整个div