使用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引用的object ，該object具有屬性img ，其中包含圖像的URL。

要使用該對象的img屬性，只需引用它：

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