Image path in AngularJs

Question

I have a image path in AngularJs $scope variable imageUrl, which comes from external source.

http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg

I am trying to get the image on HTML page.

<img ng-src="{{imageUrl}}">

But when I am trying to run this in firefox, it is giving me error

"NetworkError: 403 Forbidden - http://localhost/demo/view/html/%5B%22http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg%22%5D"

Its taking root path of project. How can I make some changes to show image on the web page?

jessegavin · Accepted Answer · 2014-07-14 14:01:12Z

3

If you look at the error that was generated, it contains some url encoded characters as well. I entered it into a Url Decoder and this is what the image url string actually looks like.

http://localhost/demo/view/html/["http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg"]

Notice the bracket and quote characters?

This leads me to believe that $scope.imageUrl contains the [""] symbols. You can easily test this out by rendering the value in a <pre> tag next to the <img> tag like so...

<img ng-src="{{imageUrl}}">
<pre>{{imageUrl}}</pre>

If the value in the rendered <pre> tag has the [""] symbols, then the solution is to remove those symbols from the $scope.imageUrl property.

You can remove these symbols from imageUrl like so...

$scope.imageUrl = $scope.imageUrl.replace(/[\[\"\]]/g, "");

However, if you're using the $http service to retrieve this data from the Flickr API, you should consider using the transformResponse option which allows you to manipulate data (in your case, strip out bad characters from the imageUrl) from an http request before resolving the promise.

edited Jul 14, 2014 at 14:01

answered Jul 14, 2014 at 12:16

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

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

3 Comments

jessegavin Over a year ago

Do you know how they are getting there in the first place?

ankitr Over a year ago

Its coming from the Flickr API.

jessegavin Over a year ago

I updated my answer with an example of how you could strip the unwanted characters. - It would be interesting to see the code you're using to retrieve the data from Flickr

V31 · Accepted Answer · 2014-07-14 12:09:32Z

0

I have created a fiddle and it is working perfectly in chrome and firefox. Hope it solves your problem

Fiddle

HTML Markup:

<div ng-app>
    <div ng-controller="test">
        <img ng-src="{{imageUrl}}">
    </div>
</div>

answered Jul 14, 2014 at 12:09

V31

7,6643 gold badges28 silver badges44 bronze badges

2 Comments

ankitr Over a year ago

Yes it runs with html. But creating problem with server.

V31 Over a year ago

@Ankit: Seeing your error again you need to remove the localhost url so from localhost/demo/view/html/%5B%22http://farm6.staticflickr.com/…" you need to have farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg%22%5D"

DanielBarbarian · Accepted Answer · 2016-12-14 10:48:59Z

0

html-

<div ng-app>
  <div ng-controller="test">
    <img ng-src="{{imageUrl}}">
    </div>
  </div>      
</div>

js-

function test($scope){

     $scope.imageUrl = 'https://angularjs.org/img/AngularJS-small.png';

  }

edited Dec 14, 2016 at 10:48

DanielBarbarian

5,39312 gold badges37 silver badges45 bronze badges

answered Dec 14, 2016 at 10:30

Prasad Sonawane

786 bronze badges

Collectives™ on Stack Overflow

Image path in AngularJs

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related