Изображение 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

Я использовал библиотеку (react-alice-carousel) для рендеринга слайдов изображений. Это было причиной проблемы. Просто переключил библиотеку на response-animated-slider, и это сработало. Спасибо всем за помощь и ваше время.

Answer 2

Попробуйте, я удалил ключ из дочернего элемента 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>
                  );
                })}