Question

我目前正在创建一个图像库来处理我的技能。

我有一个数组，其中包含来自名为'images'的文件夹中的图像。

我有一个ID为'imgsrc'的图片，我的HTML页面上有一个空来源，因此它没有显示任何内容。我希望能够访问我的'images'文件夹中的第一个图像，并使用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的引用。直接编辑：

＆＃13;

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);

＆＃13;

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

＆＃13;

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 个答案: