javascript - 为什么当我对 src URL 进行硬编码时会显示我的 img，而当我以编程方式分配它时却没有？

Question

我正在创建一个练习 React 应用程序，并正在使用 Firebase Storage 从我的 Firebase Storage 存储桶中提取图像并将其显示在网站上。然而，尽管图像 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' /> 
      );
    }
}

标签： javascriptreactjsfirebaseecmascript-6firebase-storage

Answer 1

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

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

还使用文档查询设置图像 src 不是最佳实践