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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With