How to add alt text to images without an ID

Question

I need to add alt text to various images which do not have IDs or anything else to identify the images from one another other there the image file names.

Is there a way to add alt text to each image based on what the image file name is?

Here's an example of the code I started working on, but it obviously doesn't work and I'm not even sure I am heading in the right direct. Any help would be much appreciated.

<script>
document.onload = function(){
  img.setAttribute('src', 'icons-vegan.png');
  img.setAttribute('alt', 'Vegan Icon');
  img.setAttribute('title', 'Vegan Icon'); 
}   
document.onload = function(){
  img.setAttribute('src', 'icons-gluten.png');
  img.setAttribute('alt', 'Gluten Icon');
  img.setAttribute('title', 'Gluten Icon'); 
}   
</script>

Answer 1

We can simply select all the img tags from our HTML and update the alt and title dynamically.

// find all img tags and convert the list to an array
const imgs = Array.from(document.getElementsByTagName("img"))

// loop through each image and process the `src` attribute
imgs.forEach(img => {
  const altText = img.src
    .split("/") // split the string into segments delimited by "/"
    .at(-1) // get last segment
    .split(".").slice(0, -1).join(".") // remove file extension
    // remove dashes and capitalize
    .split("-").map(s => s[0].toUpperCase() + s.slice(1).toLowerCase()).join(" ")

  // add properties
  img.setAttribute("alt", altText)
  img.setAttribute("title", altText)
})

Demo:

// find all img tags
const imgs = document.getElementsByTagName("img")

console.log("before adding alt:", [...imgs])

// loop through each image and process the `src` attribute
Array.from(imgs).forEach(img => {
  const altText = img.src
    .split("/") // split the string into segments delimited by "/"
    .at(-1) // get last segment
    .split(".").slice(0, -1).join(".") // remove file extension
    // remove dashes and capitalize
    .split("-").map(s => s[0].toUpperCase() + s.slice(1).toLowerCase()).join(" ")

  // add properties
  img.setAttribute("alt", altText)
  img.setAttribute("title", altText)
})

console.log("after adding alt:", [...imgs])

<img src="icons-vegan.png" />
<img src="icons-gluten.png" />
<div>
  <img src="/something/something-else.png?12345" />
</div>

Answer 2

Basic solution making lots of assumptions given the lack of detailed context

var images = document.getElementsByTagName("img");
for(var image of images)
{
 image.setAttribute("alt", image.src)
}

1. Get all images by simply getting a list of all elements of tag ""

2. For each image, set its alt = its src

Answer 3

Select all images and loop them to get their src attribute. Once you have them, you can set the alt attribute for each image which is inside that loop. Here is an example:

const images = document.querySelectorAll('img');

for (let img of images) {
  switch (img.getAttribute('src')) {
    case 'banana.png':
      img.alt = 'Banana';
      break;
    case 'apple.png':
      img.alt = 'Apple';
      break;
    case 'orange.png':
      img.alt = 'Orange';
      break;
  }
}

<img src="banana.png">
<img src="apple.png">
<img src="orange.png">