簡體   English   中英

如何將圖像插入到 div 中?

[英]How can I insert an image into a div?

我目前有一個來自我的 html 文件的 div,它也有來自我的 css 文件的樣式。 當我嘗試從 my.js 文件到 div 的 append a.jpg 圖片到 div 時,它沒有使用已經定義的樣式。 我是否錯誤地附加了圖片? 我不太明白為什么它不使用定義的樣式。

 var img = new Image(); img[0] = new Image(); img[0].src = '1.jpg'; img[1] = new Image(); img[1].src = '2.jpg'; document.getElementById('picture').append(img[0]);
 #picture { height: 100px; width: 10px; border: 1px solid black; }
 <div id="picture"> </div>

首先,快速修復:使用數組[]

 var img = []; img[0] = new Image(); img[0].src = 'https://placehold.it/60x60/0bf'; img[1] = new Image(); img[1].src = 'https://placehold.it/60x60/fob'; document.getElementById('picture').append(img[0], img[1]);
 #picture { height: 100px; width: 10px; border: 1px solid black; }
 <div id="picture"> </div>

其次:使用路徑數組並使用它來創建圖像,而無需重復太多代碼:

 const images = [ 'https://placehold.it/60x60/0bf', 'https://placehold.it/60x60/fob', ]; const DF_images = images.reduce((DF, src) => { const Img = new Image(); Img.src = src; DF.append(Img); return DF; }, new DocumentFragment()); document.getElementById('picture').append(DF_images);
 #picture { height: 100px; width: 10px; border: 1px solid black; }
 <div id="picture"> </div>

append - 也許你使用 jquery?

默認,你試試“appendChild”

<div id="picture"></div>
<input type='button' onclick="foo" value='Add New Image'>
<script>
function foo()
{
  var img=new Array(2);
  img[0]=new Image();
  img[0].src="1.jpg";
  document.getElementById('picture').appendChild(img[0]);
}
</script>

如果使用 Jquery

<script>
funcntion foo()
{
  $("#picture").append("<img src='1.jpg'>");
}
</script>

您添加“寬度:10px”這就是為什么沒有在盒子上設置圖像的原因。 看到這個也許你的問題已經解決了。

 var img = []; img[0] = new Image(); img[0].src = 'https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'; img[1] = new Image(); img[1].src = 'https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'; document.getElementById('picture').append(img[0], img[1]);
 #picture { height: auto; width: 100px; border: 1px solid black; } #picture img { width: 100%; height: auto; display:table; }
 <div id="picture"> </div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM