Load image via ajax in angular

Question

I wish to load a image via ajax i.e get contents of image via ajax and show this as a image. I Know how to do the later part but

how do i get the ajax data/blob into a variable
how can i make a ajax call in a directive

I want the actual content of image not just src/url. I want to do this to overcome the CSP restriction of chrome apps

https://developer.chrome.com/apps/contentSecurityPolicy

@aWebDeveloper You can bind the directive to a button, bind a click event listener to the element (which is the button), and trigger the ajax call function using angular's $http service — Alon Eitan
– Alon Eitan, Commented Feb 29, 2016 at 17:57
why would you need to make ajax call in directive? Even if you do there is no difference in approach — charlietfl
– charlietfl, Commented Feb 29, 2016 at 17:58

A G · Accepted Answer · 2016-02-29 17:57:57Z

1

Edit: To load image directly using base64

<img data-ng-src="data:image/png;base64,{{imageData}}" />

Updated Fiddle - http://jsfiddle.net/1koLs9fh/2/

To update URL

You need to bind the ng-src to some variable. On AJAX response update this variable.

    <div ng-app="myApp">
        <div ng-controller="myCtrl">                
            <img ng-src="http://{{url}}"/>
            <button ng-click="loadImages()">load images</button>
        </div>
    </div>

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl',
    function ($scope) {        
        $scope.loadImages = function() {
        $scope.url = 'cdn1.www.st-hatena.com/users/ho/howdy39/profile.gif';       
        }
    }
);

http://jsfiddle.net/1koLs9fh/

edited Feb 29, 2016 at 17:57

answered Feb 29, 2016 at 17:47

A G

22.9k12 gold badges94 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

charlietfl Over a year ago

never want to use src ... browser will make funky requests with uncompiled url which will of course be 404

A G Over a year ago

agreed. Use ng-src. Just an example.

aWebDeveloper Over a year ago

i don't want the src but actual image in src. i.e make ajax call and get the actual image not just src.

A G Over a year ago

you mean actual bytes?

charlietfl Over a year ago

@aWebDeveloper need to transpose that image file to a base64 dataUri then. Doesn't really make sense sending image itself if it is stored web accessible directory

|

Collectives™ on Stack Overflow

Load image via ajax in angular

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related