<li ng-repeat="appliance in appliances | limitTo:2">
<div class="icon">
<img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
</div>
<div class="label">{{ appliance.Label }}</div>
</li>
In AngularJS I can see in the console that it tries to load '/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'. Now my ng-repeat works just fine. If I decodeURIComponent I see that the above %7B and %7D are '{' and '}' respectively. How can I prevent this error from happening?
Use ng-src here instead src
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
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.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\
For more info see this link https://docs.angularjs.org/api/ng/directive/ngSrc
You have to use ng-src, if you use src, the browser tries to load the image before angular's loaded, that's why ng-src exists.
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
Related
Id like to display dynamic background images using angular's ng-repeat directive.
At the moment Im doing this by setting it as an inline style like so:
<div ng-repeat="thing in things"
style="background-image: url({{thing.image}})" >
</div
I would prefer to use standard angular tools to accomplish this and avoid using inline styles. I would set a static background image using ng-style but this does not seem practical for an indeterminate number of objects.
What is the correct solution for something like this?
To set an image dynamically, suggest to use ng-src
<div ng-repeat="thing in things">
<img ng-src="{{thing.ImageUrl}}" />
</div
This would then give you expected result, because thing.ImageUrl is evaluated and replaced by its value after angular is loaded.
Update as a background Image now
<div ng-repeat="thing in things" ng-style="{'background-image': 'url(' + thing.ImageUrl + ')'}"></div
you can use it into <img> tags like below
<img ng-repeat="x in array" src="{{ x.image_url }}" style="static inline stylesheet" />
or use
<img ng-repeat="x in array" ng-src="x.image_url" style="static inline stylesheet" />
I have a strange issue with my a value not properly working. Basically I have a big array of id's that correspond to images on a server.
Images: {
"Set1" : {
'Blue':['8277','8278','8279','8280','8281','8282','8283'],
'Green':['8284','8285'],
'Red':['8286','8287','8288','8289']
}
}
Within my controller model I have an ng-repeat that looks something like this.
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p>
<img src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
</p>
</div>
</div>
My issue that it will not actually resolve the img onto the page. If I pull in imgs any other way it works fine.
Is this a problem with mixing HTML and within an ng-repeat loop?
use ng-src in place of just src
<img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
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.
Documents : https://docs.angularjs.org/api/ng/directive/ngSrc
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p> <img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000"></p>
</div>
</div>
This is an issue that's been plaguing my app since I wrote this section weeks ago. Basically I've got two images that should be displayed one at a time based on a boolean value. Using the ng-show directive, when I update the variable twice, the heart image is displaced, as if the other is still in place and invisible (which I'm sure is likely the case).
<i class="icon icon-accessory">
<img class="padding-basic-right" src="img/love.svg" width="48px" ng-show="track.loved"/>
<img class="padding-basic-right" src="img/skip.svg" width="48px" ng-show="!track.loved"/>
</i>
Is there a fix for this/a better solution? I can live with it for now, but for polish's sake it needs fixing.
Use ng-src with conditional {{}} interpolation directive.
ng-src="{{ track.loved ? 'img/love.svg': 'img/skip.svg'}}"
Other alternative would be using ng-if instead of ng-show
<i class="icon icon-accessory">
<img class="padding-basic-right" src="img/love.svg" width="48px" ng-if="track.loved"/>
<img class="padding-basic-right" src="img/skip.svg" width="48px" ng-if="!track.loved"/>
</i>
A possible cause of your issue is that your CSS is overriding the .ng-hide CSS class Angular adds to your image when ngShow resolves to true. Try using the ng-if directive instead -- this will cause the img tag that isn't in use to be removed from the DOM entirely.
In the following code sample why are the brackets necessary around position[0].position in the ng-click directive in the anchor element but not in the ng-show directive in the divs?
<div ng-controller="PlayersController as pl">
<section ng-init="tab = 'goalkeepers'">
<li ng-repeat="position in pl.players">
<a href ng-click="tab = {{position[0].position}}">{{position[0].position}}</a>
</li>
</section>
<div ng-repeat="position in pl.players">
<div ng-repeat='player in position' ng-show="tab === position[0].position">
<h2 ng-show='$first'>{{player.position}}</h2>
<h3>{{player.name}}</h3>
<h4>{{player.price | currency: '£': 0}} {{player.score}}</h4>
</div>
</div>
</div>
Does it have to do with setting equality versus checking for equality? Is it related to the nested ng-repeat?
When I add brackets around the equality check in ng-show in the div element I get a parse error, why?
In Angular expressions need to be within the curly-brace bindings, where as
Angular directives do not.
As we understand that ng-click is a directive you don't need to add curly-brace there.
You don't need the brackets in the ng-click attribute. Angular evals the value of the attribute so just ng-click="tab = position[0].position;"
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>
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}}>
// ^^^
Replace with this
<img ng-src="d.image.Thumb">