What's the simplest way to print a image Javascript array?

JavaScript
1

What’s the simplest way to print a image Javascript array?

2

You should try this code out.

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

/* ... more images ... */

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

/*------------------------------------*/

function nextImage(element)
{
    var img = document.getElementById(element);

    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src) // << check this
        {
            if(i === imgArray.length){
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}
1 Like
3

Can you provide an example of the array and the result of what you want to achieve?

4

html

<div id="arrayImages"></div>

js

var images = ["1.png", "2.png", "3.png"];

for (var i = 0; i < images.length; i++) {
  document.getElementById("arrayImages").src = images.src;
}
5

Just the JavaScript code:

    const images = ["1.png", "2.png", "3.png"];
    const arrayImagesElement = document.getElementById("arrayImages");

    function createImageNode(fileName, altText) {
      const img = new Image();
      img.src = fileName;
      img.alt = altText;
      return img;
    }

    images.forEach(img => {
      const altText = "The filename for this image : " + img; 
      arrayImagesElement.appendChild(createImageNode(img, altText));
    });

HTML and JS with comments:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Print JS Array</title>
  </head>
  <body>
    <div id="arrayImages"></div>
  </body>
  <script>
    // Array of image file names
    const images = ["1.png", "2.png", "3.png"];
    // Reference to the container for the images
    const arrayImagesElement = document.getElementById("arrayImages");

    // Function that creates HTMLImageElement instance
    function createImageNode(fileName, atlText) {
      // Learn more about the image element
      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
      const img = new Image();

      // when png images 1,2,3 exist on your machine/server, uncomment img.src = fileName;
      img.src = "https://i.giphy.com/media/QAsBwSjx9zVKoGp9nr/giphy.gif";
      img.alt = "A gif of Keanu Reeves";

      // img.src = fileName;
      // img.alt = altText;

      return img;
    }

    images.forEach(img => {
      // For each file name in the 'images' array, create and append a new
      // image node to the end of the list of children of <div id="arrayImages"></div>
      // https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
      arrayImagesElement.appendChild(createImageNode(img));
    });
  </script>
</html>
1 Like