html 从对象设置图像URL [已关闭]

siotufzp  于 2023-11-15  发布在  其他
关注(0)|答案(2)|浏览(99)

**已关闭。**此问题为not reproducible or was caused by typos。目前不接受回答。

这个问题是由错字或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
6天前关闭
Improve this question
我有这个数据,返回一个图像的URL。
1.我怎样才能把它插入我的卡?这是我目前所拥有的。
1.如何在我的图片的“src”中设置URL?谢谢。
卡片1一些文字

  1. <div class="column">
  2. <div class="card">
  3. <h3 class="title">Card 2</h3>
  4. <img class="image" src="image">
  5. <p class="price">Some text</p>
  6. </div>
  7. </div>
  8. <div class="column">
  9. <div class="card">
  10. <h3 class="title">Card 3</h3>
  11. <img class="image" src="image">
  12. <p class="price">Some text</p>
  13. </div>
  14. </div>

字符串
我的剧本

  1. <script>
  2. const jsonArray = '[{"product_id": 1,"product_name": "Product 1","product_image": "https://www.gstatic.com/webp/gallery3/1.sm.png","product_price": 19.99},{"product_id": 2,"product_name": "Product 2","product_image": "https://www.gstatic.com/webp/gallery3/1.sm.png","product_price": 24.99},{"product_id": 3,"product_name": "Product 3","product_image": "https://www.gstatic.com/webp/gallery3/1.sm.png","product_price": 29.99}]';
  3. const data = JSON.parse(jsonArray);
  4. const cardElements = document.getElementsByClassName("card");
  5. for (var i = 0; i < data.length; i++) {
  6. const currentCardElement = cardElements.item(i);
  7. const cardTitle = currentCardElement.getElementsByClassName("title").item(0);
  8. cardTitle.innerHTML = data[i].product_name;
  9. const cardImage = currentCardElement.getElementsByClassName("image").item(0);
  10. cardImage.innerHTML = data[i].product_image;
  11. const cardPrice = currentCardElement.getElementsByClassName("price").item(0);
  12. cardPrice.innerHTML = data[i].product_price;
  13. }
  14. </script>

z31licg0

z31licg01#

如果我正确理解了你的问题,你想将<img>src属性设置为与数据一起接收的图像?
W3Schools通过正确的搜索很快就会出现。你可能正在寻找像this这样的东西。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <img id="myImage" src="smiley.gif">
  5. <script>
  6. document.getElementById("myImage").src = "landscape.jpg";
  7. </script>
  8. </body>
  9. </html>

字符串

展开查看全部
zphenhs4

zphenhs42#

您可以在DOM元素上使用the setAttribute method来更改其属性,在本例中为src。
下面是一个例子:3秒后,狗将变成一只猫,因为它的源被替换。

  1. setTimeout(() => {
  2. document.querySelector("img").src = "https://placekitten.com/300/300"
  3. }, 3000)

个字符
为了插入元素,你可以使用几个不同的函数来创建和追加一个元素。下面是一个例子:

  1. let node = document.createElement("p")
  2. let text = document.createTextNode("This paragraph was inserted with DOM!")
  3. node.appendChild(text)
  4. document.querySelector("#target").appendChild(node)
  1. <div id="target">
  2. </div>

appendChild总是将元素放在最后,但您也可以将其放在不同的位置或使用其他函数移动它。
P.S.如果你觉得这太乏味了,使用像jQueryReact这样的外部库可以帮助你更容易地插入和操作HTML

展开查看全部

相关问题