We Keep Coding

How to Load local images in Angular JS?

I am just starting with AngulerJs and I want to load a image from a sub-folder.
This is my controller code:.
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
This is the code in my index.html:
<img ng-src="{{img_source}}"/>

You can do like this
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
if this your scope variable of the image path you can bind the image like below in your html using ng-src
<img ng-src="{{ img_source }}" />

Use the image tag as you used to place image for normal html images
<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source">

If you're using the angular-cli, you should have an assets folder in your solution.
Drop in the image you want to load, into this folder.
Now on the whatever-component.html page insert this line
<img src="assets/{{img_source}}" alt="img_source" title="img_source">
The {{}} requires you to define the img_source in the typescript file corresponding to the whatever-component.html file.
So define the the name of the picture over there:
public img_source: string = 'yourpicture.jpg';

Angularjs Image Compress passing value into $scope model

I would like to ask, so I came across this angular image compress function which works great as per what I want. I have successfully implement it to work but there is 1 problem, the compress function returns me with a base64 encoded image which is stored in a local $scope and can only be called in the html page itself if I am not mistaken like such.
<td style="width: 15%">
<div class="canvas-wrapper">
<img class="canvas-image" ng-src="<%image1.compressed.dataURL%>"/></div>
</td>
<td>
<input id="inputImage" ngf-select ng-model="statusData.file" ngf-multiple=false type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.5" resize-type="png" />
</td>
In order for me to get the compressed image I have to echo the base64 code by calling <%image1.compressed.dataURL%>
Now my problem is how should I pass this value into the $scope model that i have created specifically to store this value? I tried doing something like
<%$scope.imageCache.data = image1.compressed.dataURL%> but it did not work.
I need the conpressed data to be passed into my custom module so I can perform other actions with the image.
Here is a Demo of the code working code
Hopefully someone can help me in such scenario.
Update 1: Found a temporary cheating workaround is by calling ng-click="image1 = null" when user click on the icon.

ng-src is a directive that evaluates its content. Thus you should provide a value from your $scope.
<img class="canvas-image" ng-src="image1.compressed.dataURL"/>
This will provide the data given that in $scope.image1.compressed.dataURL you have correct data.
So without using ng-src it would be
<img class="canvas-image" src="{{image1.compressed.dataURL}}"/>
Or with your modified interpolation symbols
<img class="canvas-image" src="<%image1.compressed.dataURL%>"/>

src stripped from json html data when using angular.js and angular-sanitize.js

I'm an angular noob here... but enjoying figuring it out. I have simple json file containing text like so:
"gettingstarted":{
"title":"Getting Started",
"content":"<img ng-src='images/pageone-snorkeler.png' width='150' height='107' alt='Snorkeler' /><p>Getting Started...... and a lot of other html in here...</p>"
},"etc..."
I am trying to load images into the rendered html, however, angular seems to be stripping the src and ng-src from my html.
My page.tpl.html file looks like so:
<h1 ng-bind-html="page.title"></h1>
<div ng-bind-html="page.content"></div>
I am loading / using:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
I can see all the html render in the page correctly from the json data, however, not the image. It is rendering like so:
<img width='150' height='107' alt='Snorkeler' />
What am I missing to get images to load in my html?
EDIT::::
Looks like I needed to word my question different... I found the answer here: ng-bind-html does not load image src
ng-bind-html-unsafe
...which isn't working for me... or use the fully resolved url: http://superraddomainname.com/image/image.png for example.

ng-bind-html-unsafe has been removed in angular 1.2. What you've done with ng-bind-html should work, you have to make sure you add ngSanitize as a dependency in your app. For example...
angular.module('myApp', ['ngSanitize']);
Demo - Fiddle

Angular.js image 404 Not Found

i've a tiny problem.
I'd like to show icons from categories i get from my rest api.
To do, i use rest angular which gives me icons as designed.
My problem, is a firebug alert:
"NetworkError: 404 Not Found - http://localhost:8888/app/%7B%7Bc.icon%7D%7D"
This is because my template is laded before api response.
<ul class="col-md-9 inner">
<li ng-repeat="c in categories"><img src="{{c.icon}}" alt="{{c.name}}" ng-cloak></li>
</ul>
This is the piece of corresponding code in my controller
Category.getList().then(function(categories) {
$scope.categories = categories;
});
As you can see, i've try to work with ng-cloak, i've also tried to play with ng-show="categories" but nothing more.
How can i avoid this behavior and load ng-repeat only when categories variable is populated ?

instead of
<img src="{{c.icon}}" alt="{{c.name}}" ng-cloak>
you should use ng-src:
<img ng-src="{{c.icon}}" alt="{{c.name}}">
From ngSrc documentation:
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

AngularJS - Show byte array content as image

I'm searching into my database a image as a byte array. I want to show this content as file using the markup image, but it doesn't work here.
// Controller which get my image and put into $scope.
function MyController($scope, $http, $location) {
var url = '/json/FindImage?id=1';
$http.get(url).success(function(result) {
$scope.image = result.Image;
}
}
// HTML
<!-- It doesn't work -->
<img src="{{image}}" />
<!-- It doesn't work also -->
<img ng-src="{{image}}" />
Any idea?
Thank you all!

Use ng-src in the following format
<img ng-src="data:image/JPEG;base64,{{image}}">
Don't forget to add a sanitization filter for data to not be marked as unsafe by angular:
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

If you can get your server to return the image in a base64 encoded string, you could use a data url as the src attribute.

Make sure The Data you are returning to show as a image is converted to
ToBase64String
In your C# code, Use Convert.ToBase64String(imageBytes) and in the view use this

The src attribute of img points to the source file of the image, it doesn't contain the actual source data. You can't do what you want this way; instead, you would have to write an image decoder in JavaScript (e.g., https://github.com/devongovett/png.js), which outputs into a canvas element.