使用 JavaScript 将 JSON 属性值添加到 HTML 元素的属性值中

Question

我在 JSON 文件中有一些“img”属性，它们的值是 .jpg 文件路径（例如“images/image.jpg”）。

我正在尝试将这些值添加到现有 HTML 元素的 'src' 属性中，以下是我迄今为止尝试过的......

1. 从 JSON 对象创建文本节点，然后尝试使用 '.setAttribute()' 方法将它们添加为 'src' 属性值，这会导致添加一个对象而不是作为字符串的 url 路径。

   var img = document.createElement("img"); var imgSrc = document.createTextNode(object); img.setAttribute(src, imgSrc);

2. 使用 'JSON.stringify()' 方法将 JSON 值转换为字符串并将其添加为 img 元素的 'src' 属性值。这导致 src 属性被正确的路径填充，但它们被 %22 包围，大概代表了字符串周围的引号。

   var img = document.createElement("img"); var imgSrc = JSON.stringify(object); img.setAttribute(src, imgSrc);

关于如何实现我想要做的事情的任何想法？

提前致谢。

Answer 1

听起来您有一个已经被解析为 JavaScript 对象的 JSON 字符串（或者您可能根本没有使用 JSON，而您的起点是对象）。您还没有告诉我们 JSON 是什么或对象结构是什么。在下面的评论中，您给出了其中的部分：

"img": "_/images/image-one.jpg"

...但这本身就是无效的 JSON。我将假设实际的 JSON 如下所示：

{
    "img": "_/images/image-one.jpg"
}

...并且它已经被解析了，所以我们有一个从变量object 引用的对象，它有一个属性img，其中包含图像的URL。

要使用该对象的img 属性，您只需引用它：

var img = document.createElement("img");
img.src = object.img;