How to get the image src as a variable and display an image from an array?

Question

I am currently creating an image gallery to work on my skills.

I have an array that consists of images that I have from a folder called 'images'.

I have an image that has an id of 'imgsrc' with an empty source on my HTML page, so it's not displaying anything. I would like to be able to have access to the first image in my 'images' folder and display it as the source for my image using Javascript.

Here is what I tried to do:

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

Here is my HTML :

<section class="gallery">

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

</section>

What should I do ?

I appreciate all responses

You have to specifically set the src on the element itself. Changing the variable value will have no effect on the element that you got the initial value from — charlietfl
– charlietfl, Commented Oct 14, 2017 at 14:28
document.getElementById("imgsrc").src = images[index]; is enough — Rohit Kumar
– Rohit Kumar, Commented Oct 14, 2017 at 14:36
@RohitasBehera no need to put your answer in a comment also. OP gets notified when answers are added. Comments like "check my answer" are just needless noise — charlietfl
– charlietfl, Commented Oct 14, 2017 at 14:39
Keep in mind that the way you actually have this reference stored and the reference relative to that folder. You MIGHT store it in the root images specifically i.e. "/images/myimage.jpg" — Mark Schultheiss
– Mark Schultheiss, Commented Oct 14, 2017 at 14:52

Mouser · Accepted Answer · 2017-10-14 14:30:07Z

1

The problem is that imgsrc stores the string value and not a reference to the image src. Edit it directly:

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>

answered Oct 14, 2017 at 14:30

Mouser

13.3k3 gold badges31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2017-10-14 14:30:27Z

0

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

Try to use setAttribute().

edited Oct 14, 2017 at 14:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

answered Oct 14, 2017 at 14:27

kyun

10.4k9 gold badges36 silver badges79 bronze badges

1 Comment

Thierry Diallo Over a year ago

That's what I just did, but all I get in the console is 'imgsrc.setAttribute is not a function'

Mark Schultheiss · Accepted Answer · 2017-10-14 14:38:45Z

0

Get the element then set its 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);

answered Oct 14, 2017 at 14:38

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Comments

Rohit Kumar · Accepted Answer · 2017-10-14 14:43:06Z

0

Works with Minimum Code !!!

 <!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>

**

edited Oct 14, 2017 at 14:43

answered Oct 14, 2017 at 14:36

Rohit Kumar

1,8102 gold badges14 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to get the image src as a variable and display an image from an array?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related