skip to Main Content

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>

3

Answers


  1. 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

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  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">
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search