Check image src is valid when setting

Question

I have a small piece of noddy code, when clicking an image the user can change the source. This is the function I use

function doStuff(objId){
        newVal = prompt("new Value")
        if(newVal==""){
            newVal = "blank"
        }
    document.getElementById(objId).src=newVal+".png"
}

Is there a way to check before setting the src if that is a valid filename at the same point as when I check if the user has not specified anything? I'd like to be able to protect the page so if the user types "banana" and there is no banana.png available that I just change it to the blank.png file.

I've found various methods for doing it on error but wasn't sure how to do it in this instance as none of those seem to trigger if the page is being updated dynamically.

Thanks!

Send an AJAX HEAD request to check whether the image is present before setting the src property. — Robby Cornelissen
– Robby Cornelissen, Commented Oct 19, 2018 at 9:22

Azad · Accepted Answer · 2018-10-19 09:38:57Z

4

modify the img tag to show the default image on error

<img onerror="this.src='images/default.jpg'"/>

now you can execute you function to change image dynamically

function doStuff(objId){
        newVal = prompt("new Value")
        if(newVal==""){
            newVal = "blank"
        }
    document.getElementById(objId).src=newVal+".png"
}

attached a snippet below which changes images dynamically, if not found load the default image

var server = 'https://homepages.cae.wisc.edu/~ece533/images/';

function changeImage(option) {
  
  document.getElementById('test').src = server + option.value;
}

<html>

<body>

  <img width='150' height='150' id='test' src="http://www.yostra.com/images/team/you.png" onerror="this.src='http://www.yostra.com/images/team/you.png'" />
  <br>
  <select onchange='changeImage(this)'>
  <option>--Choose--</option>
    <option value='airplane.png'>airplane.png</option>
    <option value='baboon.png'>baboon.png</option>
    <option value='abs'>ABC</option>
    <option value='arctichare.png'>arctichare.png</option>
    <option value=''>----</option>
  </select>

</body>

</html>

edited Oct 19, 2018 at 9:38

answered Oct 19, 2018 at 9:18

Azad

5,2725 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

misorude Over a year ago

Hi there, edited your question to remove the javascript: from the attribute. Not sure if that even works in that place, I know it only from <a href="javascript:foo()"> situations, but even if it does, it serves no actual purpose here. Other than that, good answer, +1

MorkPork Over a year ago

This doesn't seem to work for me, I have put this in to my source <img id = "1" class = "smallimage" src="blank.png" onclick = "doStuff(this.id)" onerror="this.src='blank.png'"> but when I click it and enter a value of "banana" (and there is no banana.png) I still get a broken link :/

MorkPork Over a year ago

Looking at the developer console I can see an error stating "net::ERR_FILE_NOT_FOUND"

MorkPork Over a year ago

Ignore my previous comments I was a total idiot and this works like a charm! cheers!

Collectives™ on Stack Overflow

Check image src is valid when setting

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related