blocks|key|631913|text|你可以试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|631914|$('#book1+.picture').html('<img+src="'%2Bbook1.pictureURL%2B'"+/>');|code-block|syntax|javascript|631915|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can try this:</p>

<pre><code>$('#book1 .picture').html('&lt;img src="'+book1.pictureURL+'" /&gt;');
</code></pre>


blocks|key|631960|text|使用.attr()+这里|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|631961|在javascript函数中，选择要更改的元素whos++src+标记，然后设置src标记：|631962|$('.picture').attr('src',+book1.pictureURL)|code-block|syntax|javascript|631963|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/attr/^0|2|7|A|2|0|0|S|5|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Use <strong>.attr()</strong> <a href="http://api.jquery.com/attr/" rel="nofollow">here</a></p>

<p>In your javascript function select the element whos <strong>src</strong> tag you want changed then set the src tag:</p>

<pre><code>$('.picture').attr('src', book1.pictureURL)
</code></pre>


blocks|key|1784627|text|您应该将src设置为src，而不是如下所示的图片文本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784628|$('#book1+.picture').attr('src',+book1.pictureURL);|code-block|syntax|javascript|1784629|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You should set the src, not the text for picture as follows: </p>

<pre><code>$('#book1 .picture').attr('src', book1.pictureURL);
</code></pre>


blocks|key|632029|text|在尝试将图像追加到DOM元素时，您是否尝试使用html()方法而不是text()。希望能成功。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|632030|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Did you try using html() method instead of text() while trying to append image to the DOM element. Hope that works. </p>


blocks|key|498665|text|非常简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|498666|您不能在div上有一个图像，但是您需要在div中有一个html图像元素。首先，将图像包含在图片div中。|offset|length|style|CODE|498667|<div><img+class=+"picture"+src=""/></div>|498668|然后，您将能够更改图像的src。我将图像的class更改为"picture"，而不是div，这样您就可以直接选择图像并按如下方式更改src：|498669|$('#book1+.picture').attr('src',+book1.pictureURL);|498670|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/tags/tag_img.asp|1^0|0|1B|3|R|8|0|14|2|1|0|0|15|0|C|3|L|5|T|9|16|3|1U|3|0|0|1F|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@$D|10|E|11|1|12]|$D|13|E|14|1|15]]|A|$]]|$1|H|3|I|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]|V|$5|Q|R|S|A|$T|U]]]]

<p>Very easy.</p>

<p>You can't have an image on the div but you need an <a href="http://www.w3schools.com/tags/tag_img.asp" rel="nofollow">html image element</a> within the div. First, include an <a href="http://www.w3schools.com/tags/tag_img.asp" rel="nofollow">image</a> within the picture <code>div</code>:</p>

<p><code>&lt;div&gt;&lt;img class= "picture" src=""/&gt;&lt;/div&gt;</code></p>

<p>then, you will be able to change the <code>src</code> of the image. I changed the <code>class</code> of the image to <code>"picture"</code> instead of the <code>div</code> so you will be able to directly select the image and change the <code>src</code> like this:</p>

<p><code>$('#book1 .picture').attr('src', book1.pictureURL);</code></p>


blocks|key|632106|text|就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|632107|​|632108|+++++++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);|code-block|syntax|javascript|632109|<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>|632110|632111|使用.attr("src",book1.pictureURL)更改图像的src属性。|offset|length|style|CODE|632112|entityMap^0|0|0|0|0|0|2|T|10|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@$N|Z|O|10|P|Q]|$N|11|O|12|P|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|S|$]]

<p>Something like that :</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>       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);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id= "book1"&gt;
    &lt;div id= "twilight" class= "book product"&gt;
        &lt;div class= "name"&gt; &lt;/div&gt;
        &lt;div class= "catagory"&gt;&lt;/div&gt;
        &lt;div class= "price"&gt;&lt;/div&gt;
        &lt;div class= "description"&gt;&lt;/div&gt;
        &lt;img class= "picture" src="" alt=""&gt;
        &lt;div class= "sellingPoints"&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Use <code>.attr("src",book1.pictureURL)</code> to change the <code>src</code> attribute of the image.</p>


blocks|key|500225|text|可能使用追加|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|500226|$(".picture").append("<img+src='<<url>>'/>");|code-block|syntax|javascript|500227|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/append/^0|4|2|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Possibly use <a href="http://api.jquery.com/append/" rel="nofollow">append</a>:</p>

<pre><code>$(".picture").append("&lt;img src='&lt;&lt;url&gt;&gt;'/&gt;");
</code></pre>


<p>I've been creating a "shopping site". I have code that allows me to add info from a javascript object to html. Everything is being added except the image, which it returns as text. Here is my code:</p>

<pre><code>    &lt;div id= "book1"&gt;
    &lt;div id= "twilight" class= "book product"&gt;
        &lt;div class= "name"&gt; &lt;/div&gt;
        &lt;div class= "catagory"&gt;&lt;/div&gt;
        &lt;div class= "price"&gt;&lt;/div&gt;
        &lt;div class= "description"&gt;&lt;/div&gt;
        &lt;div class= "picture" src= ""&gt;&lt;/div&gt;
        &lt;div class= "sellingPoints"&gt;&lt;/div&gt;
    &lt;/div&gt; 

    &lt;script&gt;
       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);
    &lt;/script&gt;
</code></pre>

<p>This is roughly what I have (with everything in their respective  and  tags. I didn't include them here). The text is placed where it is suppose to be, but I have no idea how to go about getting the image url to be placed in the src so it shows up as the actual image and not just as a txt url. </p>

<p>Is there a way to do this so it lands within the src? Or is there another way? </p>


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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我一直在创建一个“购物网站”。我有代码可以将javascript对象中的信息添加到html中。除了以文本形式返回的图像外，所有内容都将被添加。这是我的代码：    <div id= "book1">    <div id= "twilight" class= "book product">        <div cl...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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