时间戳

首页 > 解决方案 > 使用JS动态分配img标签的src

javascript - 使用JS动态分配img标签的src

问题描述

我一直在从 Firebase 读取一些数据并正在调用一个函数。它继续像

function create(link){
    ----
}

现在，我在上面的函数中动态地在 HTML 的正文中创建了 Image 标记，并为其分配了 Class 和 ID。

然后，我调用另一个函数从该 URL 获取数据

再次返回我的功能图像应该正确显示




function create(link) {

    let bodyElement = document.body;
    

    let imageElement = document.createElement('img');


    imageElement.className = "image";
    imageElement.id="imgg";
    

    download(link);

    imageElement.setAttribute("alt", "Image from Unsplash");


  }

 
  function download(link) {
    let url= link;
    console.log(url);

    if (!url) return;
 
 
    const req = new XMLHttpRequest();
    req.responseType = "text/html";
 
    req.onload = function(e) {
      var img = new Image();
      
      document.getElementById("imgg").src = this.response;
    }
 
  }

所以考虑一下我将整个 create() 调用了 10 次。

我将从 Firebase 获得 10 个不同的链接，并且每次都应该创建新的图像标签并将其附加到 HTML 正文

但是，我成功地获得了第一张图像，其余图像只是空白。src=" " 的其余图像甚至都没有创建。

它只是为第一个函数调用（）编写的。

请指导我完成。我看不出我错在哪里。

标签： javascripthtmlcssfirebaseimage

解决方案

找到了。这是非常简单的代码更改。

我将 imageelement 作为参数传递给 download() 函数并将代码修改为


 
  function download(link,imageElement) {
    let url= link;
    console.log(url);

    if (!url) return;
 
 
    const req = new XMLHttpRequest();
    req.responseType = "text/html";
 
    req.onload = function(e) {
      var img = new Image();
      
      imageElement.src = this.response;
    }
 
  }

推荐阅读