What is the best way to verify the existence of a remote image in AngularJS?

Question

What is the best way to verify the existence of a remote image in AngularJS?

Here is an example of the code snippet :

<div ng-repeat="u in users">
<!--An active URL will always be received -->
<div ng-if="u.imageUrl"> <!--Check if the provided URL is active-->
 <!--Content only visible if image url is live and active -->
</div>
<div>
<!--Do other operations here-->
</div>
</div>

For instance:

http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png

is an active URL, while

http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder11.png

is not. Also, keep in mind that the users object may contain multiple records as more people sign in.

javascript angularjs image

Answer 1

Answer №1

To achieve this functionality, you can utilize a directive:

Check out the demo

JavaScript:

.directive('replaceImage', function() {
    return {
        link: function(scope, element, attrs) {
            var defaultImage = 'path/to/default/image.jpg';

            scope.$watch(function() {
                return attrs.url;
            }, function (value) {
                if (!value) {
                    element.attr('src', defaultImage);  
                }
            });

            element.bind('error', function() {
                element.attr('src', defaultImage);  
            });
        }
    };
});

HTML:

<div ng-repeat="item in items">
    <div>
      <img url="{{item.imageUrl}}" replace-image />
    </div>
<div>

Now, if the URL specified in the url attribute is invalid, it will display the default image instead.

Answer 2

To achieve this functionality, you can utilize a directive:

Check out the demo

JavaScript:

.directive('replaceImage', function() {
    return {
        link: function(scope, element, attrs) {
            var defaultImage = 'path/to/default/image.jpg';

            scope.$watch(function() {
                return attrs.url;
            }, function (value) {
                if (!value) {
                    element.attr('src', defaultImage);  
                }
            });

            element.bind('error', function() {
                element.attr('src', defaultImage);  
            });
        }
    };
});

HTML:

<div ng-repeat="item in items">
    <div>
      <img url="{{item.imageUrl}}" replace-image />
    </div>
<div>

Now, if the URL specified in the url attribute is invalid, it will display the default image instead.

What is the best way to verify the existence of a remote image in AngularJS?

Answer №1

Similar questions

Ways to retrieve the state from the Redux store

Refreshing specific iframes without having to reload the entire webpage using jQuery

Exploring the world of jQuery AJAX alongside Google's currency calculator

PHP file secured to only accept variables posted from HTML form

What is the best way to send a parameter to the callback function of a jQuery ajax request?

Guide to displaying a particular item in Vue 3

Setting state back to default following the conditional rendering of a React component

Incorporating multiple colors into a div with jQuery: A guide

Delaying navigation to the next URL until a distinct category name is identified

Select a random class from an array of classes in JavaScript

Issue with adding a key:value pair to res.locals.object in Node/Express not functioning as expected

How does the 'snack bar message' get automatically assigned without being explicitly defined in the 'data' function?

Modify the key within an array of objects that share a common key

Node(Meteor) experiencing a memory leak due to setTimeout

Troubleshooting issues with adding rows to an HTML table

Using python to scrape images from a website with AJAX using selenium and beautifulsoup

Using JQuery's appendTo method with a lengthy string of elements that includes a mix of single and double quotes: a step-by-step guide

Sometimes the data-autoplay feature does not function properly in jQueryfullPage.js

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

Generating a Personalized XML Format Using Information from a Single MySQL Table Row by Row