如何将图像附加到 div 中的 src？

Question

我一直在创建 "shopping site"。我有允许我将信息从 javascript 对象添加到 html 的代码。除了图像之外的所有内容都被添加，它 returns 作为文本。这是我的代码：

    <div id= "book1">
    <div id= "twilight" class= "book product">
        <div class= "name"> </div>
        <div class= "catagory"></div>
        <div class= "price"></div>
        <div class= "description"></div>
        <div class= "picture" src= ""></div>
        <div class= "sellingPoints"></div>
    </div> 

    <script>
       var book1 = {
          name: "Twilight",
          catagory: ["Book", "Teen Romance", "Teen Paranormal"],
          description: "Girl meets boy. Boy turns out to be vampire. Girl falls       
          in love with boy. Boy struggles with her love. A-mazing.",
          pictureURL: "image URL",
          price: 15.99,
          sellingPoints:["Forbidden Love", "Love Triangle"]
       }



       $('#book1 .name').text(book1.name);
       $('#book1 .catagory').text(book1.catagory);
       $('#book1 .description').text(book1.description);
       $('#book1 .picture').text(book1.pictureURL);
       $('#book1 .price').text(book1.price);
       $('#book1 .sellingPoints').text(book1.sellingPoint);
    </script>

这就是我的大致情况（所有内容都在各自的标签中。我没有在此处包括它们）。文本放置在它应该放置的位置，但我不知道如何将图像 url 放置在 src 中，以便它显示为实际图像而不仅仅是文本 url。

有没有办法让它落在 src 中？或者还有其他方法吗？

Answer 1

你可以试试这个：

$('#book1 .picture').html('<img src="'+book1.pictureURL+'" />');

Answer 2

使用.attr() here

在您的 javascript 函数中 select 您想要更改 src 标签的元素，然后设置 src 标签：

$('.picture').attr('src', book1.pictureURL)

Answer 3

您应该设置 src，而不是图片的文本，如下所示：

$('#book1 .picture').attr('src', book1.pictureURL);

Answer 4

在尝试将图像附加到 DOM 元素时，您是否尝试过使用 html() 方法而不是 text() 方法。希望有用。

Answer 5

很简单。

你不能在 div 上有图片，但你需要在图片中有一个 html image element within the div. First, include an image div:

<div><img class= "picture" src=""/></div>

然后，您就可以更改图像的src。我将图像的 class 更改为 "picture" 而不是 div 这样您就可以直接 select 图像并像这样更改 src ：

$('#book1 .picture').attr('src', book1.pictureURL);

Answer 6

类似的东西：

       var book1 = {
          name: "Twilight",
          catagory: ["Book", "Teen Romance", "Teen Paranormal"],
          description: "Girl meets boy. Boy turns out to be vampire. Girl falls in love with boy. Boy struggles with her love. A-mazing.",
          pictureURL: "http://lorempixel.com/400/200",
          price: 15.99,
          sellingPoints:["Forbidden Love", "Love Triangle"]
       }



       $('#book1 .name').text(book1.name);
       $('#book1 .catagory').text(book1.catagory);
       $('#book1 .description').text(book1.description);
       $('#book1 .picture').attr("src",book1.pictureURL);
       $('#book1 .price').text(book1.price);
       $('#book1 .sellingPoints').text(book1.sellingPoint);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id= "book1">
    <div id= "twilight" class= "book product">
        <div class= "name"> </div>
        <div class= "catagory"></div>
        <div class= "price"></div>
        <div class= "description"></div>
        <img class= "picture" src="" alt="">
        <div class= "sellingPoints"></div>
    </div>

使用.attr("src",book1.pictureURL)更改图像的src属性。

Answer 7

可能使用append:

$(".picture").append("<img src='<<url>>'/>");

如何将图像附加到 div 中的 src？

How do I append an image to a src within a div?

jquery

html

image

append

src