Not sure why my image's aren't being loaded by angular, here's what I've got:
<li class="list-group-item" ng-repeat="family in product.families | orderBy:'category'">
<h3>{{family.category}}</h3>
<div class="img-wrap">
<img ng-src="{{family.image}}"/>
</div>
</li>
family.category works, but my ng-src does not seem to be. When I look in the HTML of the loaded page all I see is <img ng-src>
JSON Sytnax
"families": [
{
"category": "Tablets",
"image": "images/tablet.png"
}
]
You can take a look at the live version of this here
Make sure image url is correct, try complete image url in json.
In chrome dev tools-> network check which url it in invoking.
--
I have low reputation can't comment.
Related
In ionic, I have an array of image keys. Using these keys we want to get an Amazon S3 signed URL.
I have :
<div *ngFor="let image of item.images">
<div>Key: {{image}} -- Url: {{getImageUrl(image) }}</div>
</div>
In the Javascript part I have following:
getImageUrl(imageKey) {
this.s3.getSignedUrl('getObject', {'Key': imageKey}, (err, url) => {
console.log(url);
return url;
});
}
In the logs I do see the URLs are correctly. However in the html page; there is nothing. I have tried many things; e.g. by having the method getImageUrl create a new variable; this remained undefined.
How should I modify my code to get this working?
I strongly have the impression that this is caused by the asynch nature of angularJS/Ionic/... and that probably I need to work with callbacks. However; I can't get my head around how you would get that callback into the HTML...
I hope this is a beginner's question!
thanks!
The problem is if you want to display an image, you should use the tag, empty div wont show anything, try this
<div *ngFor="let image of item.images">
<div>
<h1> Key: {{image}} -- Url: {{getImageUrl(image) }}
</h1>
<img *ngIf="image" [src]= {{getImageUrl(image) }}>
</div>
</div>
I have my vimeo api that i fetch using angularjs or angular2.
Everything works great except the iframe.
I use {{data.embed.html}} to display the iframe but displays the iframe as string, not the video
This is my video.component.html:
<div *ngFor="let item of lenght; let i = index">
<div *ngFor="let video of videos">
<ul>
<li>{{video.data[i].embed.html}}</li>
</ul>
</div>
</div>
and this is what I get instead of getting the real video. It works great if i do it in a regular ajax get request in javascript, but I cannot make it work in any angular version.
Thank you for your help.
You are looking for [innerHtml] directive.
<li [innerHtml]="video.data[i].embed.html"></li>
More about it in Angular2 guide.
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.
I have an angular JS application, which has a number of images, from an array.
My model looks something like this
$scope.images = [ {url: 'someimage.png', desc: 'some desc'}, {url: 'someimage.png', desc: 'some desc'} ]
In my view, I iterate over this, to display all the images.
<ul>
<li ng-repeat="image in images" ><img src="{{image.url}}" /></li>
</ul>
This works, but I get some page errors, which say
404 Not Found - http://localhost/{{image.url}}
The images are displaying correctly, so it is clearly the images are trying to be loaded before Angular has parsed to document get it ready. My scripts are also in the head, so it should not be a javascript ordering error.
The problem here was that I should be using ng-src and not src, so that it will only try to display the image when Angular is ready.
So, the correct code looks like
<ul>
<li ng-repeat="image in images" ><img ng-src="{{image.url}}" /></li>
</ul>