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

【问题标题】：How do I append an image to a src within a div?如何将图像附加到 div 中的 src？
【发布时间】：2015-10-12 23:54:22
【问题描述】：

我一直在创建一个“购物网站”。我有允许我将信息从 javascript 对象添加到 html 的代码。一切都被添加，除了图像，它作为文本返回。这是我的代码：

    <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 中，因此它显示为实际图像，而不仅仅是 txt url。

有没有办法做到这一点，使其落在 src 中？还是有其他方法？

【问题讨论】：

我不想假设您的代码中有错字；你确实意识到你可以用 4 个空格来格式化代码，而且你不需要使用 inline-formatting(`)，对吧？如果你不修复它可能会让一些人失望（我可以为你修复它，或者其他人当然可以）。
您还需要使用<img> 标签而不是<div> 标签。将<div class= "picture" src= ""></div> 更改为<img class="picture" src=""></img>。 Thom-x 下面的回答似乎是对的。
哦，这是我关于stackoverflow的第一个问题。我仍然习惯于格式化，并且在我尝试找出问题的格式时可能会搞砸一段时间。感谢您编辑 Thom-X！

标签： jquery html image append src

【解决方案1】：

类似的东西：

       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属性。

【讨论】：

所以在我的例子中，我希望图像显示在哪里，我不会把它放在一个 div 中而是放在一个中？这就说得通了。谢谢！
是的，你需要使用来显示图片w3schools.com/tags/tag_img.asp。
哦，我知道，只是想可以类似于其他 div 标识符（例如 class、id、align）使用。

【解决方案2】：

使用 .attr() here

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

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

【讨论】：

你是在说 $('#book1 .picture').attr('src', book2.pictureURL)
啊，我明白你在说什么。感谢代码！

【解决方案3】：

你应该设置src，而不是图片的文字如下：

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

【讨论】：

我意识到为什么放 .text 会给我文本！呃。谢谢阿尔卑斯

【解决方案4】：

你可以试试这个：

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

【讨论】：

就像这里提到的用户“代码” attr 更好，我现在才在 div 中看到您的 src attr。
这工作谢谢！我是新来的，我忘了你可以在 () 中添加 html 以及你从中提取信息的位置。

【解决方案5】：

很简单。

您不能在 div 上放置图片，但您需要在 div 中使用 html image element。首先，在图片div中包含一个image：

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

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

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

【讨论】：

谢谢！这很有意义，不能在 div 中包含图像，但我可以在 div 标签中包含图像标签。太有帮助了！

【解决方案6】：

可能使用append:

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

【讨论】：

【解决方案7】：

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

【讨论】：