When the initial image URL returns a 404 error, the ng-src path does not automatically switch to the alternative

Question

When the initial image URL returns a 404 error, the ng-src path does not automatically switch to the alternative

I'm currently working on a webpage where I want to show an image only if the URL of that image is valid, using AngularJS.

The challenge I'm facing is that ngIf only checks whether a value is null or not. So, even if the URL returns a 404 error, something will be displayed. However, I want to display the image only if it exists and not if it returns a 404 error.

https://i.stack.imgur.com/WcC2T.png

Is there a way to prevent displaying the image if it returns a 404 error and only display it when it's available?

<img class="menu" ng-if="$ctrl.companyLogo" ng-src="{{ $ctrl.companyLogo}}">

JavaScript code:

$ctrl.companyLogo = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"

Currently, instead of showing the default logo when companyLogo returns a 404 error, no image is displayed at all.

javascript angularjs

Answer 1

Answer №1

Utilizing the Image object allows you to verify if the image path returns a 404 error or an actual image.

var given_src = 'http://idontexist.com/404.png';
var image = new Image();
image.src = given_src;
image.onerror = function(){console.log('doesnt exist or something ');}
image.onload = function() {console.log('exists or something');};

Check out this fiddle https://jsfiddle.net/pLbdqf5d/, and keep in mind that $scope.$apply in the fiddle is a temporary solution; consider implementing a promise for this function instead.

Answer 2

Utilizing the Image object allows you to verify if the image path returns a 404 error or an actual image.

var given_src = 'http://idontexist.com/404.png';
var image = new Image();
image.src = given_src;
image.onerror = function(){console.log('doesnt exist or something ');}
image.onload = function() {console.log('exists or something');};

Check out this fiddle https://jsfiddle.net/pLbdqf5d/, and keep in mind that $scope.$apply in the fiddle is a temporary solution; consider implementing a promise for this function instead.

When the initial image URL returns a 404 error, the ng-src path does not automatically switch to the alternative

Answer №1

Similar questions

Animating the mobile menu transition using Bootstrap CSS

We could not find the requested command: nodejs-backend

Manage YouTube video played within html code

Passing PHP array to JavaScript and selecting random images from the array

What is the best way to produce a random integer within the range of 0 and 2

Incorporating Datatables into Django for optimized data presentation

Functionality of retrieving arrays from PHP via jQuery ajax (JSON) runs smoothly, however encounters issues specifically on web server

What are the best practices for optimizing the display of my AngularJS website for GoogleBot and Optimizely?

Is it possible to run a local file on a localhost server in Sublime Text 3 with the help of the SideBar

Can anyone recommend a high-quality jQuery lightbox replica?

What causes non-reactive variables to act unusual in Vue3?

The event is not triggered by ng-submit

Delete entries in table based on user-provided criteria

Puzzled on how to include a string in the parameter for a GET request?

Can you point me in the direction of the Monaco editor autocomplete feature?

Choosing between global and local Node packages can be a crucial decision that affects

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

The HTML button fails to respond when clicked

Updating all the direct components within the corresponding category with jQuery

Combining photos seamlessly and bringing them to life through animation upon window loading