javascript - 如何将图像文件添加到表格单元格，其中这两个元素都是使用 JS 动态创建的？

Question

正如这个问题的标题所解释的，我试图在我的 javaScript 代码中创建一个图像，然后，我想将该图像添加到一个具有可变行数的动态表中。

创建图像并动态添加单元格不是问题，但是当我尝试将 img src 分配给包含该图像路径的变量时，图像无法加载。但是，当我输入 img src="the path as a string"时，我没有遇到任何问题。所以总而言之，我想找到一个解决方案，可以让我将变量放入 img src 中，话虽这么说，图像没有在 HTML 代码中声明，所以我不能使用 document. getElementById('myImage').src = myVariable

我的 JavaScript 代码:

function Add_Line(tableID,nom,imageLink)
{
    var ligne = tableID.insertRow(-1);

    var colonne0 = ligne.insertCell(0);
    colonne0.innerHTML += nom;
    //adding the variable nom to the first column(no problem here)

    //trying to insert the string stored into my imageLink variable to the img 
    //src (here is the problem)     
    var colonne2 = ligne.insertCell(2);
    colonne2.innerHTML ='<td align="center"><img src=imageLink></td>'; 
}

我希望有一个显示项目列表的表格，每行都有自己的图像

Answer 1

问题在于您设置 img src 的方式。您将其设置为 <img src=imageLink> 。你想要做的是使用 imageLink变量:

colonne2.innerHTML ='<td align="center"><img src=' + imageLink + '></td>'; 

或使用模板文字:

colonne2.innerHTML =`<td align="center"><img src=${imageLink}></td>`; 

但请记住，这可能不是最安全的方法，因为如果 imageLink 则您将打开网页以遭受注入(inject)攻击。变量是任意的，并且没有以某种方式进行清理。