使用JS动态分配img标签的src答案

【问题标题】：Assigning src of img tag dynamically using JS使用JS动态分配img标签的src
【发布时间】：2021-04-23 04:21:31
【问题描述】：

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

function create(link){
    ----
}

现在，我在上面的函数中动态地在 HTML 的 Body 中创建了 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=" " 的其余图像甚至都没有创建。

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

请指导我。我看不出哪里错了。

【问题讨论】：

id 应该是唯一的。 document.getElementById("imgg") 将始终引用它找到的第一个，即您创建的第一个图像。您的代码还有许多其他问题，但快速解决方法是简单地将创建的 imageElement 作为第二个参数传递给 download 函数，这样 onload 函数就可以使用它。
是的，但我需要在外部创建它，以便我可以将它附加到其他 div
将 imageElement 传递给 download() 函数并使用它来设置 src。

标签： javascript html css firebase image

【解决方案1】：

找到了。修改代码真的很简单。

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

【讨论】：

【解决方案2】：

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

const createLink = (link) => {
    let parentDiv = document.getElementById("imgLinks");
    let count = 0;

    while (count < 10) {
        let imageElement = document.createElement("img");
        imageElement.className = "image";
        imageElement.id = "imgg";
        imageElement.setAttribute("alt", "Image from Unsplash");
        imageElement.setAttribute("src", `${link}${count}?set=set2`);
        parentDiv.append(imageElement);
        count++;
    }
};

document.addEventListener("DOMContentLoaded", (e) => {
    createLink("https://robohash.org/");
});

&lt;div id="imgLinks"&gt;&lt;/div&gt;

【讨论】：