URL图片仅在调整浏览器大小时显示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
);
})}
...
还有一件事,当我调整浏览器大小时,图像立即显示出来。不知道为什么
答案
尝试这个:
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图片仅在调整浏览器大小时显示的主要内容,如果未能解决你的问题,请参考以下文章