why image is not display in angular js

Question

I make a simple demo in angular js to call service .Actually I am not able to display my image in my list . First check my web service url

http://timesofindia.indiatimes.com/feeds/newsdefaultfeeds.cms?feedtype=sjson
I call web service using display web security like that on macc /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --allow-file-access-from-files --allow-file-access --user-data-dir=~/chrome-test/ spec/runner.html

on desktop : --disable -websecurity

I am able to call service but my image is not display on list here is my code on code pen

http://codepen.io/anon/pen/qdPoYN

<div class="list" ng-repeat="d in data">

    <a class="item item-thumbnail-left" href="#">
        <img src={{d.image.Thumb}}>
        <h2>{{d.HeadLine}}</h2>
        <p>{{d.DateLine}}</p>
    </a>
</div>

</div>

what is the URL of image that you are trying, is it from same domain or from different domain? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 20, 2015 at 6:14

Tushar · Accepted Answer · 2015-06-20 06:12:32Z

2

Use ng-src:

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.

<img ng-src={{d.image.Thumb}}>
//   ^^^

edited Jun 20, 2015 at 6:12

answered Jun 20, 2015 at 6:08

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

7 Comments

squiroid Over a year ago

Docs :- docs.angularjs.org/api/ng/directive/ngSrc. Kudos !!. You beat me by 20 sec :P. I deleted my anser :P

user944513 Over a year ago

still no image display usng your solution

user944513 Over a year ago

actually I display my security of chorme .first you disable the web sercuity then check

user944513 Over a year ago

use this --disable-web-security in chrome property

user944513 Over a year ago

superuser.com/questions/593726/… ...check this

|

DannyGolhar · Accepted Answer · 2015-06-20 09:52:54Z

0

Replace with this

                   <img ng-src="d.image.Thumb">

answered Jun 20, 2015 at 9:52

DannyGolhar

2062 silver badges10 bronze badges

2 Comments

zfj3ub94rf576hc4eegm Over a year ago

This is wrong. Text must be placed in double braces like {{d.image.Thumb}}

DannyGolhar Over a year ago

No need of double curly braces if ur using 'ng-src'

Collectives™ on Stack Overflow

why image is not display in angular js

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related