javascript - 为什么我的 img 在我硬编码 src URL 时显示，但在我以编程方式分配它时却不显示？

Question

我正在创建一个练习 React 应用程序，并使用 Firebase 存储从我的 Firebase 存储桶中提取图像并将其显示在网站上。但是，尽管图像 URL 已正确分配给 的 src，但该图像并未出现。但是，当我将图像 URL 直接复制/粘贴到 JSX 中的 src 时，一切都会显示出来并且工作正常。

我的 console.log() 消息显示在渲染之前收到了正确的图像 URL。此外，在站点加载完成后，在开发人员工具控制台中运行 document.getElementsByClassName('Image').src 也会显示正确的图像 URL。当我将图像 URL 硬编码到 src 中时，一切正常并显示图像。

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

试试这个，看看它是否适合你

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

同时使用文档查询设置图像 src 不是最佳做法