How do I store images in an array for JavaScript

Question

I was wondering if anyone knew if it is possible and how you would go about storing an image in an array. I am fairly new to JavaScript so if you do know how to do it could you walk through the syntax and explain how you did it. I have tried using locally stored photos as well as image URLs from the internet. I want to display the photos when certain conditions are met and a button is pushed. I am trying to make a movie suggestion website that will show an array of images when a genre is selected and the button is pushed. I know my code isn't close to complete but any push in the right direction would be most appreciated.

This is how I've tried to store the images in an array and it isn't working

var images = ['github-logo.png', 'linkedin-logo.png', 'gmail.png']

Answer 1

You can try using an array like below:

var pics = {
    "genre1":["pic1.jpg", "pic2.jpg", "pic3.jpg"],
    "genre2":["pic4.jpg", "pic5.jpg", "pic6.jpg"],
    "genre3":["pic7.jpg", "pic8.jpg", "pic9.jpg"]
};

Then you can get the related pics for a particular genre like below:

var picarray = pics.genre1;

Or

var picarray = pics["genre1"];