如何獲取圖像src作為變量並顯示數組中的圖像？

Question

我目前正在創建一個圖片庫，以提高自己的技能。

我有一個數組，其中包含來自名為“ images”的文件夾中的圖像。

我的HTML頁面上有一個ID為'imgsrc'且源為空的圖像，因此不顯示任何內容。 我希望能夠訪問“圖像”文件夾中的第一張圖像，並使用Javascript將其顯示為圖像的源。

這是我嘗試做的事情：

var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg','images/7.jpg', 'images/8.jpg', 'images/9.jpg'];

var imgsrc = document.getElementById('imgsrc').src;

var index = 0;

imgsrc = images[index];

這是我的HTML：

<section class="gallery">

  <img id='imgsrc' src="">

</section>

我該怎么辦？

我感謝所有回應

Answer 1

問題在於imgsrc存儲字符串值，而不是對圖像src的引用。 直接編輯：

 var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg','images/7.jpg', 'images/8.jpg', 'images/9.jpg']; var index = 0; console.log(document.getElementById('imgsrc').src); document.getElementById('imgsrc').src = images[index]; console.log(document.getElementById('imgsrc').src);

 <section class="gallery"> <img id='imgsrc' src=""> </section>

Answer 2

var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg','images/7.jpg', 'images/8.jpg', 'images/9.jpg'];

var imgsrc = document.getElementById('imgsrc');

var index = 0;

imgsrc.setAttribute('src',images[index]);

嘗試使用setAttribute() 。

Answer 3

使用最小代碼！

  <!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <section class="gallery"> <img alt="sd" id='imgsrc' src=""> </section> <script> var images = ['http://i65.tinypic.com/zl2rfr.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg','images/7.jpg', 'images/8.jpg', 'images/9.jpg']; var index = 0; document.getElementById("imgsrc").src = images[index]; </script> </body> </html>

**

Answer 4

獲取元素，然后設置其src

var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg','images/7.jpg', 'images/8.jpg', 'images/9.jpg'];
var imgsrc = document.getElementById('imgsrc');// get element
var index = 0;
imgsrc.src = images[index];
console.log(imgsrc.src);

如何獲取圖像src作為變量並顯示數組中的圖像？

問題描述

4 個解決方案

解決方案1
1 已采納 2017-10-14 14:30:07

解決方案2
0 2017-10-14 14:27:22

解決方案3
0 2017-10-14 14:36:11

解決方案4
0 2017-10-14 14:38:45

如何獲取圖像src作為變量並顯示數組中的圖像？

問題描述

4 個解決方案

解決方案1 1 已采納 2017-10-14 14:30:07

解決方案2 0 2017-10-14 14:27:22

解決方案3 0 2017-10-14 14:36:11

解決方案4 0 2017-10-14 14:38:45

解決方案1
1 已采納 2017-10-14 14:30:07

解決方案2
0 2017-10-14 14:27:22

解決方案3
0 2017-10-14 14:36:11

解決方案4
0 2017-10-14 14:38:45