Question

我一直在创建一个“购物网站”。我有代码，允许我从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内？或者还有另一种方式吗？

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

Answer 2

你可以试试这个：

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

Answer 3

使用 .attr（） here

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

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

Answer 4

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

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

Answer 5

很简单。

您不能在div上拥有图片，但在div中需要html image element。首先，在图片NSIndexSet中添加image：

NSTimeInterval defaultInterval = ...; NSTimeInterval __block cumInterval = 0; [indexes enumerateRangesUsingBlock:^(NSRange range, BOOL *stop) { if( range.length == 1 ){ cumInterval += defaultInterval; return; } NSUInteger firstIdx = range.location; NSUInteger secondIdx = range.location + range.length - 1; NSDate * firstDate = dates[firstIdx]; NSDate * secondDate = dates[secondIdx]; cumInterval += [firstDate timeIntervalSinceDate:secondDate]; }];

然后，您将能够更改图像的div。我将图片的<div><img class= "picture" src=""/></div>更改为src而不是class，因此您可以直接选择图片并更改"picture"，如下所示：

div

Answer 6

可能使用append：

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

Answer 7

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

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

7 个答案: