Note : Both Netscape and Internet Explorer support the Images collection (Netscape call it an array). For properties, methods and events that are supported by <IMG> element, see the <IMG> topic.

The Images collection is an ordered, indexed (by document source order) array, containing a reference to every <IMG> element in a document. For example, consider the following document:

Image Objects would normally be retrieved by their index in the Images collection (for example, above document.images(3) contains a reference to the 4th image in the document element), but a string value can be used, as long as that string is a valid identifier (ID or NAME attribute value) for an image element in the document.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the images collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.images(2).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

images.item(index, sub-index)

If index is a number, then the method returns a reference to the image object at that position in the images collection index. I.e.

bIsComplete=document.images.item(2).complete

would make bIsComplete be a boolean value dependant on the 3rd <IMG> elements complete property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every image in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte

Questions:

• Interesting little snippet from a post in a Facebook Javascript group which loads an image, /local/ to the browser, into the web page.
  The HTML:

  <input type="file" onchange="previewFile()"><br>
  <img src="" height="200" alt="Image preview...">
  

  and then the JS:

  function previewFile() {
    const preview = document.querySelector('img');
    const file = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();
      reader.addEventListener("load", function () {
      // convert image file to base64 string
      preview.src = reader.result;
      }, false);
    if (file) {
      reader.readAsDataURL(file);
      }
    }
  

  Possible uses? Local customization of a web page's display without needing to manage user settings at the server?