I am trying to connect to tumblr API with angularJS
EDIT
I now I try to do:
JS:
tumblr.controller('tumblrs', function($scope, $http) {
$http.get("http://www.tinymediaempire.tumblr.com/api/read/json/")
.success(function(responses) {$scope.post = responses.response.posts;});
});
HTML:
<div ng-controller="tumblrs">
<ol>
<li ng-repeat="spost in post">{{ spost.photos[0].alt_sizes[0].url }}</li>
</ol>
</div>
In your JSON example I don't see a .photo_url_500 property in the photos objects.
I think you need to refer to .alt_sizes[1].url to get the url for a 500px image.
You also need to use ng-src attribute instead of src as the img tag will try and load from the literal text before angular has loaded:
<img ng-src="{{ photo.alt_sizes[1].url }}" />
Related
I have an array in my component
this.myArray = [
{
img: '/path/to/myImage.svg',
title: 'My Image'
}
]
Which I am using in the template to render a list
<div *ngFor="let item of myArray">
<img src="/path/to/myImage.svg"> --> This works
<img [src]="item.img"> --> this gives error 404
<div>
I am able to show the svg if I directly provide the url, however, property binding throws 404 error, What am I missing here?
P.S my angular project doesn't include angular-cli/angular.json
I think if you are receiving data asynchronous then your binding should be work.
When the value is received, AsyncPipe signals the component to check for changes.
https://angular.io/api/common/AsyncPipe
images$: Observable<Image[]> = this.imageService.getImage();
<div *ngFor="let image of images$ | async">
<img [src]="image.src"/>
<div>
In Angular, String interpolation is used to display dynamic data on HTML template (at user end). It facilitates you to make changes on component.ts file and fetch data from there to HTML template (component.html file).
<div *ngFor="let item of myArray">
<img src="{{item.img}}">
<div>
This should work
<ng-container *ngIf="myArray">
<div *ngFor="let item of myArray">
<img src="/path/to/myImage.svg"> --> This works
<img [attr.src]="item.img"> --> this should work
<div>
</ng-container>
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>
<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">
I have an angularJS service that reads data from a json file and returns me an object with a few SVG image file names.
I have a ng-repeat on the return object to look and display all the SVG files on the page.
Here is my ng-repeat on my template
<div ng-repeat="items in libCtrl.categories track by $index">
<div ng-include="img/library/items.categoryImage"></div>
</div>
This code does not display any SVG image file on the page.
But if I hardcode the value of the file names on the ng-include it works.
<div ng-repeat="items in libCtrl.categories track by $index">
<div ng-include="'img/library/myfile.svg'"></div>
</div>
How can I get it to work using the data from my items.categoryImage?
Check working demo: Plunker.
Use <div ng-include="'img/library/' + items.categoryImage"></div>
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">