javascript - Replace with default image if image not found -angularjs - Stack Overflow

admin管理员组

文章数量:1291026

What could be the best possible condition to check and display if the image path is undefined in AngularJS. I have tried like this:

HTML:
<div ng-src="{{imageUrl}}" == "null" || src="img/avatar.png" >

CONTROLLER:
$scope.imageUrl="125.178.1.127/uploads/image" +$scope.imageName;

If $scope.imageName is undefined I have to load/show the default image img/avatar.png

What could be the best possible condition to check and display if the image path is undefined in AngularJS. I have tried like this:

HTML:
<div ng-src="{{imageUrl}}" == "null" || src="img/avatar.png" >

CONTROLLER:
$scope.imageUrl="125.178.1.127/uploads/image" +$scope.imageName;

If $scope.imageName is undefined I have to load/show the default image img/avatar.png

• javascript
• angularjs
• image

Share Improve this question Follow asked Mar 30, 2015 at 12:47 forgottoflyforgottofly 2,7191212 gold badges5454 silver badges9696 bronze badges 2

• possible duplicate of if a ngSrc path resolves to a 404, is there a way to fallback to a default? – Josh C. Commented Mar 30, 2015 at 12:53
• But my condition dosen't resolve to a 404.It gets undefined instead – forgottofly Commented Mar 30, 2015 at 12:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

This should work:

<div ng-src="{{imageName ? imageUrl : 'img/avatar.png'}}">

I use the Angular Image Fallback modul and perfectly works! Just place fallback-src and loading-src to the image tag.

In your modul:

angular.module('starter', ['dcbImgFallback'])

In your HTML:

<img ng-src="your image path" fallback-src="your image default" loading-src="your image loading">

This is also works in ng-repeat. Hope this can helps.

本文标签： javascriptReplace with default image if image not found angularjsStack Overflow