javascript - 使用 JavaScript 变量将 HTML 图像标记中的图像与 DOM 链接

Question

我想使用一个 JavaScript 变量，它等于 html img 标记中图像的 url。我需要以下标签才能显示与变量关联的图像。

document.getElementById("id-of-img-tag").src = imgVar;

document.getElementById("id-of-img-tag").innerHTML = imgVar;

<img id="id-of-img-tag" src=" " alt="img">

JS 的两行结果都显示了 img 标签“img”的替代项。

Answer 1

1. 您正在使用 getElementBy 身份证 () <image 的方法类 ="id-of-img-tag"...> .尝试 querySelector(" . id-of-img-tag")相反。

2. 第二个陈述没有意义。 innerHTML将字符串解析为 HTML。 imgVar不是字符串，甚至没有定义。 imgVar应该只是一个简单的字符串，字面上表示图像的 url:

    var imgVar = "url of img"
   

3. 分配 imgVar到 src <img> 的属性

演示

var imgVar = "https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg";

document.querySelector(".id-of-img-tag").src = imgVar;

<img class="id-of-img-tag" src="" alt="img">