I need to display an image in angularjs(File in local). by
<img src="imagename.jpg"> and <img ng-src={{imagename.jpg}}
this two methonds. i cant display it. Any help will be appreciated.
1 Answer
You are probably getting an error with $sce in which the image source is not trusted.
Just pass the $sce service as a dependency and use trustAsResourceUrl so that Angular will not throw the error.
app.controller('myCtrl', function($scope, $sce) {
$scope.myImgSrc = $sce.trustAsResourceUrl('path/to/img.jpg');
});
You can then use the $scope property as the img src like this:
<img ng-src="{{myImgSrc}}">
7 Comments
ImMathan
thanks. But what i should include in html file for this script.
ImMathan
Its not working :(. `html ng-app="myapp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div ng-controller="myCtrl"> <img ng-src="{{myImgSrc}}"> </div> </body> </html>
ImMathan
var myapp=angular.module('myapp',[]); app.controller('myCtrl', function($scope, $sce) { $scope.myImgSrc = $sce.trustAsResourceUrl('/Abc_Mobiles/assets/www/partials/345i0iwf.jpg'); }); This is my code.
m59
@user3110587 Saying "it's not working" isn't enough information. What isn't working? Inspect the element on the page, is the src set? Are there errors in the console? Also, you mentioned in your edit that using the img tag directly doesn't work. If that's the case, your error probably doesn't have to do with angular. It sounds you like you have server or file problem. Can you make a demo on jsbin?
ImMathan
When i upload it to server. It wont work. Only works when i give it as markup.
|
$scope. Angular things of that as$scope.imagename.jpg, which is not what you want to do :) Does your console show any errors?