Javascript 使用JS动态分配img标记的src

我从Firebase读取了一些数据，正在调用一个函数。事情是这样的

function create(link){
    ----
}

现在，我已经在上面的函数中动态地在HTML主体中创建了图像标记，并为其分配了类和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;
    }
 
  }

请考虑我将此调用为10次。

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

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

它仅为第一个函数调用（）编写

---

请引导我通过。我看不出我错在哪里。

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

我将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;
    }
 
  }

---

问题在于范围，您正在创建一个img元素并更改该img上的src，请尝试以下操作：

constcreatelink=（link）=>{
让parentDiv=document.getElementById（“imgLinks”）；
让计数=0；
同时（计数<10）{
让imageElement=document.createElement（“img”）；
imageElement.className=“image”；
imageElement.id=“imgg”；
setAttribute（“alt”，“来自非Flash的图像”）；
setAttribute（“src”，`${link}${count}？set=set2`）；
parentDiv.append（imageElement）；
计数++；
}
};
document.addEventListener（“DOMContentLoaded”，（e）=>{
创建链接（“https://robohash.org/");
});
一个
id
应该是唯一的<代码>文档。getElementById（“imgg”）

将始终引用它找到的第一个，即您创建的第一个图像。你的代码还有很多其他的问题，但是一个快速的解决方法是将创建的

imageElement

作为第二个参数传递给

download

函数，这样onload函数就可以使用它了。是的，但是我需要在外部创建它，这样我就可以将它附加到其他div的pass imageElement以下载（）函数并使用它来设置src。