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

Executing multiple calls with Angular's $http service and then resolving them within a loop using underscore

Combining audio tracks using NodeJS: A step-by-step guide

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

Exploring the functionality of Jquery with the :active selector

Encountering an unexpected error with the InvalidCharacterError in IE11 when using VEE Validate in conjunction with Vue.js and babel-p

How can I eliminate the border from the last child in a row within a responsive framework?

Organize the attributes of components on the following line in Visual Studio Code

Does CausesValidation validate all validators, including validation groups?

The validation process is still failing even though the correct credentials have been entered

Ensuring Consistent HTML5 Page Layout Across Various Browsers Using CSS

Tips for scrolling ion-items vertically to the bottom and top using arrow icons in Ionic 4

What is the best way to position the content area to the right of the menu on my website?

What's the reason behind express-rate-limit not performing as anticipated?

Content obscuring dropdown menu

Why is Handlebars {{body}} not rendering my HTML tags properly?

Modify the arrow design for the expansion panel's default arrow style

Are multiple instances of ajax being executed within the modal?

What is causing Ajax to fail in connecting to the server?

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database