Menu
I am filling in <img src= tags using AngularJS, so urls in my html are:
<img src='[[profile.image]]'>
When I load the page the image shows but the get errors in the Javascript console too:
GET [[profile.image]] 404 (NOT FOUND)
So the browser is trying to fetch the image before Angular has interpolated the value right? Then when Angular sets the value the browser fetches again and this time shows the image.
How can I either get Angular to do this earlier, or get the browser to wait? I don't like having the error exposed.
544
You're using the wrong path to the images. In the Angular project, you don't have to add the relative path from your file to image file. Angular resolves this problem for you, and in a component, you have to only add a path to the assets folder, instead of ../../assets.
In HTML, you can react to broken images at runtime by attaching a handler to the img element's error event. In Angular, you can do this in a directive that you can then simply apply to an img element without any additional code.
Angular has a special directive just for this case: http://docs.angularjs.org/api/ng.directive:ngSrc
<img ng-src="{{profile.img}}" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
