使用 JavaScript 变量将 HTML 中的图像标签中的图像与 DOM 链接答案

【问题标题】：Using a JavaScript variable to link an image in a image tag in HTML with DOM使用 JavaScript 变量将 HTML 中的图像标签中的图像与 DOM 链接
【发布时间】：2018-03-22 02:37:09
【问题描述】：

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

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

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

&lt;img id="id-of-img-tag" src=" " alt="img"&gt;

JS 的两行结果都显示为 img 标签“img”。

【问题讨论】：

在浏览器中打开开发者工具有没有报错？
第一件事是你使用getElementById来获取img元素，但上面的元素有id-of-img-tag作为class，而不是id。
没有错误我有一个 console.log(imgVar);它输出图像的链接。是的，对不起错字，但在 html 文件中它的 id="id-of-img-tag"
Find Google+ avatar for given email address without OAuth的可能重复

标签： javascript html dom

【解决方案1】：

您正在为<image 使用getElementById() 方法class ="id-of-img-tag"...>。请改用querySelector("。id-of-img-tag")。
第二个说法没有意义。 innerHTML 会将字符串解析为 HTML。 imgVar 不是字符串，也没有定义。 imgVar 应该只是一个简单的字符串，字面上代表图片的 url：
```
 var imgVar = "url of img"
```
将imgVar 分配给<img> 的src 属性

演示

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

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

&lt;img class="id-of-img-tag" src="" alt="img"&gt;

【讨论】：

感谢这种工作，但不是图像而是看到this你知道如何解决这个问题吗？
图片的具体网址是什么？
所以它用于我的网站的谷歌登录页面，我希望显示用户个人资料图片，以便它链接到用户的 propfile 图片。（图片尺寸：96x96 及其 jpg）image
如果您指的是用户个人资料图片，就像我们在本网站上的图片一样？
是吗？但是当谷歌发回图像时，它会将其作为 var

【解决方案2】：

答案在于您的 HTML 代码。您已经为标签分配了“id-of-img-tag”的 class，然后在您的 javascript 中，您正在使用 getElementById()。因为没有一个名为“id-of-img-tag”的id，所以没有任何改变，所以浏览器看到一个“空”src并显示alt图片

同样在代码中，您提供的不是定义 imgVar，而是返回您显示的“未定义”错误。

这是一个工作示例：

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

let url = "https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg";

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

【讨论】：