Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide input="image" if image src not found

Tags:

html

asp.net

I'm using the following JavaScript function to hide images on my webpage in the event that the source image is not found:

function Image_OnError(image) {
    image.onerror = "";
    image.style.visibility = "hidden";
    return true;
}

I add the following attribute to my images which calls the above method in the event of an error onerror="Image_OnError(this);".

The problem is that I need to do the same for <input type="image" /> elements but can't figure out how to do this as the input element doesn't appear to have an OnError event.

I could just include an extra image with the same src value as the input and then modify the visibility of the input element on the image's OnError event, but this seems a bit messy.

like image 339
Matthew Dresser Avatar asked Feb 22 '10 10:02

Matthew Dresser


People also ask

How do you hide image not found icon when source image is not found?

You should use visibility: hidden instead of . hide() if hiding the images might change the layout. Many sites on the web use a default "no image" image instead, pointing the src attribute to that image when the specified image location is unavailable.

How hide image if src is empty?

HTML allows to use the onerror event on images to hide them when the src URL returns a 404, or when it's undefined or null . In React, you can use the onError event to prevent 404 errors.

How do you show an alternate image if source image is not found?

You simply need to add class='backup_picture' to any img tag that you want a backup picture to load if it tries to show a bad image.


1 Answers

If you'd like a semi-hack, you can use jQuery's "document.ready" event, and check the height of the input.

EDIT: In response to you're answer to Aviator's question above... You could just use an asp:LinkButton, and wrap an image inside of it as content... and then use the OnCommand event of the LinkButton.

like image 60
Timothy Khouri Avatar answered Oct 16 '22 03:10

Timothy Khouri