How do I Add a Default image in this JS code?

Question

I have images in a folder on my server that has all 50 states as the names of each image (nevada.jpg, utah.jpg etc). My tracking software passes State location, and we use the JS code below to show visitors the correct state image based on their location. My problem is, if or any reason we can't pull their location, or they are outside the states, we'd like to have a default image

I've tried just adding a default image in the src but that didn't work.

<a href="http://google.com"><img id="state" src="index_files/deault.jpg" height=300 width=250 class="content-img img-responsive"></a>
      <script>
    document.getElementById("state").src = "index_files/" + getURLParameter("region") + ".jpg";
</script>

I just need the default image to appear, when no other image is available based on the region parameter

Well, no, it's not going to work because you're changing the image's source unconditionally. Your question posits "if the user's location is not known, use the default". Where is that IF condition in your code? — user47589
– user47589, Commented Aug 20, 2019 at 19:50

Seph Reed · Accepted Answer · 2019-08-20 20:16:28Z

2

No matter what, the image src gets overwritten. If you'd like to have a backup value, you can notate that like so:

document.getElementById("state").src = 
  "index_files/" 
  + (getURLParameter("region") || "default") 
  + ".jpg";

Or, better yet:

document.getElementById("state").src = 
  `index_files/${getURLParameter("region") || "default"}.jpg`;

edited Aug 20, 2019 at 20:16

answered Aug 20, 2019 at 19:52

Seph Reed

11.5k15 gold badges89 silver badges159 bronze badges

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

Comments

Conrad Kay · Accepted Answer · 2019-08-20 20:10:03Z

1

if an image cannot be loaded, the onerror attribute will be called

<img onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" id="state" src="index_files/deault.jpg" height=300 width=250 class="content-img img-responsive"></a>

answered Aug 20, 2019 at 20:10

Conrad Kay

1407 bronze badges

Comments

kenef · Accepted Answer · 2019-08-20 19:58:44Z

Looks like you need to do a simple data check on the return of getURLParameter().

If getURLParameter() is a custom function, code it so that it returns false if region cannot be found.

Then call the function and set its return to a variable. Then check the variable with a conditional to handle the two possible results:

function getURLParameter(region: string) {
   ...
   if(the region is defined, or able to be fetched) {
      // return the file name
   } else {
      return false;
   }
}

var stateName = getURLParameter("region");

if(stateName){
   document.getElementById("state").src = "index_files/" + stateName + ".jpg";
} else {
   document.getElementById("state").src = "index_files/default.jpg";
}

Hope this helps.

Collectives™ on Stack Overflow

How do I Add a Default image in this JS code?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related