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

Verify Departure on External Links within Wordpress

Updating the default value of a MUI TextField: Step-by-step guide

The function $.post(...) is failing to detect the JSON content in the

Locate the div in the array that includes ValueA, and save ValueB from it into a new variable

Generic partial application fails type checking when passing a varargs function argument

Passing data from a directive to a controller in AngularJS

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

Error thrown: SyntaxError - Forbidden break statement in AJAX code execution

What is the best way to include the existing query string value in the hyperlinks on my page?

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

The icon on my page is not displaying, and the responsive menu is also not appearing

Exploring a JSON Object with nested properties, crafting changes, and producing a fresh object: A step-by-step guide

Receiving Null Value Upon Asynchronous API Call Before Data Retrieval

Retrieve the output of a function once the function has completed

Exploring the use of Rails and jQuery to automatically update data through the use of setTimeout and ajax calls

"I'm encountering an issue with Passport.js where req.isAuthenticated is throwing an error as not

Using Angular-Resource instances throughout the entire application

Uploading a file to a .NET Framework API Controller using React

Ways to launch the React Material date picker while hiding the date input field

Execute various settimeout or display functions on various elements of a webpage