Image from an array HTML Javascript

Question

This is a basic question but most examples I find are a little bit too complex.

I am trying to create an array of photos, and then display only a selected one.

This is my array:

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'images/pie1a.png';
imgArray[1] = new Image();
imgArray[1].src = 'images/pie1b.png';
imgArray[2] = new Image();
imgArray[2].src = 'images/pie2a.png';
imgArray[3] = new Image();
imgArray[3].src = 'images/pie2b.png';

This is my HTML:

<img src=imgArray[1] width="33" height="32">

I also tried this:

document.write('<img src="' + imgArray[1] + '" width="120" height="120"/>');

The photo is never displayed. What am I doing wrong?

Shouldn't <img src=imgArray[1] width="33" height="32"> be <img src=imgArray[1].src width="33" height="32"> ? — Scott
– Scott, Commented Apr 11, 2014 at 14:31

Niet the Dark Absol · Accepted Answer · 2014-04-11 14:30:14Z

2

Try this:

var imgArray = [
    'images/pie1a.png',
    'imgaes/pie1b.png',
    // ...
];
document.write('<img src="'+imgArray[1]+'" width="120" height="120" />');

Note that document.write is not a good idea, it should be avoided, but if it at least gets your code working it's a good start!

answered Apr 11, 2014 at 14:30

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

durbnpoisn Over a year ago

I agree. You're better off giving the original image an ID and use: document.getElementById("name").src = imgArray[1]

phylax · Accepted Answer · 2014-04-11 14:32:04Z

1

With this:

imgArray[3] = new Image();
imgArray[3].src = 'images/pie2b.png';

you need to write:

document.write('<img src="' + imgArray[3].src + '"/>'); 
// please note the '.src'

answered Apr 11, 2014 at 14:32

phylax

2,09615 silver badges16 bronze badges

Collectives™ on Stack Overflow

Image from an array HTML Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related