What is the best way to use JavaScript to fill in missing images with alternative HTML content?

Question

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. The traditional method of adding alt attributes to images does not give me enough flexibility to inform users of how they can view the pictures.

<div id=theDiv>
    <img src='http\internalSite\' + this.name + '.jpg'
    alt='Please connect to internalSite to see the picture ' + this.name + '.jpg'>
</div>

I am looking to enhance the alt text by providing a direct link to the 'internalSite' or possibly loading the connection page in an iFrame for a better user experience. However, I have found it challenging to achieve this functionality using the onError attribute of the IMG tag when the image is dynamically added to the page by script.

Is there a way for my script to detect if the picture is unavailable beforehand so that I can make a decision on what action to take?

In pseudo code:

if (isURLavailble(path)){
    loadPicture();
} else {
    loadSomethingNiceToSayPicIsntAvailable();
}

Is there a reliable cross-browser function that can be defined to check if a URL is available like isURLavailable(path)?

javascript html css

Answer 1

Answer №1

If you have broken images on your website, one way to handle them is by replacing them with login links:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>

    <body>

        <img src="doesnotexist">

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            // Check if an image is loaded and replace broken ones with a login link
            $( document ).ready( function () {
                "use strict";
                $('<a href="login">login here</a>').replaceAll($('img').filter( function () {
                    return !(this.complete && this.naturalHeight !== 0);
                }));
            });
        </script>

    </body>
</html>

For more information on handling broken images in JavaScript, you can refer to this answer.

Alternatively, you can dynamically set the images and handle errors like this:

var img = new Image();
img.onload = function () {
    $(img).appendTo('.image-container');
};
img.onerror = function () {
   $('<a href="login">login here</a>').appendTo('.image-container');
};
img.src = 'doesnotexist';

Answer 2

If you have broken images on your website, one way to handle them is by replacing them with login links:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>

    <body>

        <img src="doesnotexist">

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            // Check if an image is loaded and replace broken ones with a login link
            $( document ).ready( function () {
                "use strict";
                $('<a href="login">login here</a>').replaceAll($('img').filter( function () {
                    return !(this.complete && this.naturalHeight !== 0);
                }));
            });
        </script>

    </body>
</html>

For more information on handling broken images in JavaScript, you can refer to this answer.

Alternatively, you can dynamically set the images and handle errors like this:

var img = new Image();
img.onload = function () {
    $(img).appendTo('.image-container');
};
img.onerror = function () {
   $('<a href="login">login here</a>').appendTo('.image-container');
};
img.src = 'doesnotexist';

Answer 3

Answer №2

One way to verify a URL is using JQuery jqXHR requests:

$.get("urlToVerify.com").done(function () {
  displayImage();
}).fail(function () {
   showAlternativeMessageWhenImageIsNotAvailable();
});

Answer 4

One way to verify a URL is using JQuery jqXHR requests:

$.get("urlToVerify.com").done(function () {
  displayImage();
}).fail(function () {
   showAlternativeMessageWhenImageIsNotAvailable();
});

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

Answer №1

Answer №2

Similar questions

The styling of divIcons in React Leaflet Material UI is not applied as expected

Definitions for TypeScript related to the restivus.d.ts file

How come certain rectangles vanish when one rectangle completely fills the space?

Create a Vue application that is built on modules which could potentially be absent

Maintaining datatype integrity in MongoDB Stitch when decrementing with update statements

CSS animations can make the navigation bar vanish into thin air

The CSS styles are not being applied correctly in the HTML document

I am a newcomer to HTML and I am eager to display the selected options from a <select> element

Instructions for converting a readonly text field into an editable one using JavaScript

Submitting the form does not result in the textbox being cleared

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

Dynamic styling based on conditions in Next.js

A Step-by-Step Guide to Successfully Clicking on a Checkbox Using Selenium and Python

The functionality of jQuery.hover with AJAX is malfunctioning

After the execution of the script by V8, which phase will be initiated first?

I'm encountering an issue with the dropify plugin where the data-allowed-file-

What is the most efficient method for examining dependencies in Yarn 2 (berry)?

Utilizing JQuery for real-time total updates

A unique column in the Foundry system that utilizes function-backed technology to calculate the monthly usage of engines over a

Prevent the ability to drag and drop within specific div elements