如何获取存储在 javascript 变量中的图像以显示在 HTML 代码中？答案

【问题标题】：How do I get an image stored in a javascript variable, to display in an HTML code?如何获取存储在 javascript 变量中的图像以显示在 HTML 代码中？
【发布时间】：2022-01-22 08:28:49
【问题描述】：

如何获取存储在 javascript 变量中的图像以显示在 HTML 代码中？

例如，我的图像存储在一个名为 flowers 的变量中，如下面的 javascript 代码所示：

<script>
     var flowers = "myFlowers.gif";
</script>

在以下 HTML 代码中，我在 img src 中引用了 flowers 变量以显示图像，但似乎无法正常工作。

<img src= flowers  class="card-img-top" id="flowers">

请帮忙，我做错了什么？

【问题讨论】：

除非您使用某种特殊的模板语言...该标记将简单地指示浏览器将图像源设置为字符串flowers，而不是变量的值。使用document.getElementById('flowers').src = flowers;

标签： javascript html image src

【解决方案1】：

你不能这样直接插入。相反，您通过 javascript 设置属性 src。

let flowers = "https://picsum.photos/200/300";
document.querySelector('#flowers').src = flowers;

&lt;img  class="card-img-top" id="flowers"&gt;

【讨论】：