CODEWITHSUNDEEP
htmlangularjs
Antonis
Antonis

Reputation: 195

Ng-source not work for image

I try to load image with dynamic values and html with angular but is not work.I try this:

<img ng-src="img/{{product.Category}}/{{product.id}}.jpg">

and this also:

<img src="img/{{product.Category}}/{{product.id}}.jpg">

Any suggestions? Thanks in advance.

Upvotes: 1

Views: 146

Answers (2)

Mohamed Bechir Lahmer
Mohamed Bechir Lahmer

Reputation: 11

try to put this output in "alert()" in your controllers to check the value. if the output is not empty, check your controllers. check your db if images are stored with their extension or not !

Upvotes: 0

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8178

function AppCtrl($scope) {
    $scope.link = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg';
    $scope.changeLink = function() {
        $scope.link = 'https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg';
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="AppCtrl"> 
        <a href='#'><img ng-src="{{link}}" ng-if="link"/></a>
        <button ng-click="changeLink()">Change Image</button>
    </div>
</div>

We can use ng-src but when ng-src's value became null, '' or undefined, ng-src will not work. So just use ng-if for this case - make sure the image is available in that path

Upvotes: 2

Related Questions