How to display an image through an array?

Question

I've asked this question already but I haven't been able to get many answers. I'll try and be more clear with this one!

I have an array which I am randomizing using math.random. I am displaying this array in the browser, each time the page refreshes it randomizes and outputs a different array item. Each array item contains a title and description which works, but I am also trying to add an image. I want this image to be displayed in the browser.

JavaScript:

var myArray = [
              {title: "my title", description: "my description", image: "file path"},
              ];

function getArray(ary){
  return ary[Math.floor(Math.random()*ary.length)];
}
var random = getArray(action);

and then in my HTML I have a <script> tag to display each portion of the item to the browser,

        document.write(random.title);
        document.write(random.description);
        document.write(random.image);

The problem is, the image doesn't show up it only displays the actual file path in text. How am I able to display the actual image?

Have you heard of the site google.com? It gives you answers even faster than stackoverflow. — Farzher, Apr 04 '15 at 22:15
@StephenSarcsamKamenar I have tried Googling, I must not be that good at it... — roguerat, Apr 04 '15 at 22:18
@UğurGümüşhan trust me, I've tried img src... If you look at my previous question I asked, everyone was telling me to not use src in JavaScript... Maybe I misunderstood what they meant. — roguerat, Apr 04 '15 at 22:18
http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag — Uğur Gümüşhan, Apr 04 '15 at 22:21

Mr.Web · Accepted Answer · 2015-04-04T22:33:39.677

1

You are to place the html for the image, this way:

document.write('<img src="'+random.image+'" width="203" height="350" />');

Otherwise your random.image only shows the output of the array, which is text with "file path" written in it.

edited Apr 04 '15 at 22:33

answered Apr 04 '15 at 22:11

Mr.Web

6,992
8
51
86

Thank you so much! I've honestly spent hours on this and I don't know why I couldn't figure it out, but this made it all make sense. – roguerat Apr 04 '15 at 22:30

score 1 · Answer 2 · answered Apr 04 '15 at 22:19

1

If you want to create the images dinamically, a possible way is the following:

var x = document.createElement("IMG");
x.setAttribute("src", "file.jpg");
document.body.appendChild(x);

answered Apr 04 '15 at 22:19

Roger

1,053
1
8
14

score 0 · Answer 3 · answered Apr 04 '15 at 22:12

0

Make it valid HTML. Like <img src="path">

And this is some random text because the answer was too short.

answered Apr 04 '15 at 22:12

W van Rij

536
2
16

How to display an image through an array?

3 Answers3