当我对src URL进行硬编码时，为什么我的img出现了，但是当我以编程方式分配它时却没有？

Question

I'm creating a practice React app, and am using Firebase Storage to pull an image from my Firebase Storage bucket and show it on the website. The image, however, does not appear, despite the fact that the image URL is properly assigned to 's src. However, when I copy/paste the image URL directly into the src in JSX, everything shows up and works fine.

My console.log() message shows the correct image URL is received before rendering. Also, after the site has finished loading, running document.getElementsByClassName('Image').src in the developer tools console also shows the correct image URL. When I hardcode the image URL into the src then everything works fine and the image displays.

class App extends React.Component {

  constructor(props) {
    super(props); 
    this.state = {url: ''};  
    let storage = firebase.storage();
    let gsReference = storage.ref('blue.png');

    gsReference.getDownloadURL().then(url=> 
          {
              console.log("received URL: ", url); 
              this.setState({url: url})
          }
        );
  }


render() {

      document.getElementsByClassName('Image').src = this.state.url; 
      console.log("img URL: ", document.getElementsByClassName('Image').src);  

      return (
              <img src="" className='Image' /> 
      );
    }
}

Answer 1

Try this to see if it work for you

<img src={this.state.url} className="Image" />

Also set image src using document query is not a best practise