I have a src attribute of and img element which is being filled with an angular template, like this:
<img src="img/data/{{row.image}}" />
And whenever I browse the page I get the following 404 error from the browser:
GET http://localhost:8080/img/data/%7B%7Brow.image%7D%7D 404 (Not Found)
Is there some way to prevent the browser from trying to fetch the image until the template is resolved?
Use ng-src
<img ng-src="img/data/{{row.image}}" />
Related
I need to show a picture in a blade view loaded dynamically with AngularJS.
this is the short piece of code causing me many headaches since many days:
<img ng-src="#{{ $video.thumb }}" width="57">
if I put #{{ $video.thumb }} outside the img ng-src I get the correct path of the image.
I wouldn't change the whole app using interpolate provider.
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
More in HTML if I search with the inspector for the img tag I can't see anything, just
<img width="57">
I'm running it locally.
Please help me
I post the solution if someone else need it.
I had to use the full url in the ng-src.
Since I'm using Laravel and I'm working on a Blade view I had to use the following code:
<img ng-src="{{ url('/') }}/storage/#{{ video.thumb }}" width="57">
with {{ url('/') }} to get the domain url, then added /storage/ because I saved my files in that folder and at the end the angular var.
In my project called App, I have a controller, which contains a complex object that has a field referencing App/img/blue.jpg:
myApp.controller("myController",function($scope){
$scope.message = "Home Page";
$scope.Photo1 = {
name: "blue_bird",
image:"/img/blue.jpg"
};
});
However the image is not loading when I do this:
<img src="{{Photo1.image}}" />
I also tried changing the image field to img/blue.jpg and ~/img/blue.jpg, none works. When I change image to a web link, though, it works
Read the documentation here.
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="{{Photo1.image}}"/>
The correct way to write it:
<img ng-src="{{Photo1.image}}"/>
Found the answer. In the Projects panel on the left hand side of the window, click the Files tab, drag the file into the editing area, right between the quotation marks of the src="" attribute. The img tag then looks like this:
<img src="../img/blue.jpg" alt="" />
So the object in the controller should look like:
$scope.Photo1 = {
name: "blue_bird",
image:"../img/blue.jpg"
};
And in View:
<img ng-src="{{Photo1.image}}"/>
I have an edit profile page with html code as follow:
<img ng-src="{$root.user.userProfilePic}" />
where $rootScope.user.userProfilePic = "imageUrlHere" />
However, when i updated the userProfilePic again using controller in the same page, the profile image is still remain the same. This does not occur if i use $scope. How could i fix it?
UpdateUserProfilePicApi.then(function (res) {
$rootScope.user.userProfilePic = res.imgUrl;
});
You are missing {{double braces}}, try this:
<img ng-src="{{user.userProfilePic}}" />
ng-src docs
There is no need of using the $root.Try this :
<img ng-src="{{user.userProfilePic}}" />
This gives you expected result, because user.userProfilePic is evaluated and replaced by its value after angular is loaded.
<img ng-src="{$root.user.userProfilePic}" />
But with this, the browser tries to load an image named $root.user.userProfilePic, which results in a failed request. You can check this in the console of your browser.
You don't need to use $root as $rootScope is accessible from all the views.
Remove $root from your code.
<img ng-src="{{user.userProfilePic}}" />
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}
My page has header, content and footer.
<div id='header'></div>
<div data-ng-view=""></div>
<div id='footer'></div>
I have binding in header section, how can I delay header view rendering until model loaded to prevent flicker ? I do not want the user to see this while ajax data is loading.
I have checked this post, it only will works for the ng-view.
My page header and footer are part of the master page, they are not governed by $routeprovider
Try ng-cloak. It will hide the page until angularJS is ready.
Try adding a conditional attribute in the header tag.
<div id="header" ng-show="model_name"></div>