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}}" />
Related
The image is not showing in webpage.
Image code I am using
<img src={{uri: ConfigFile.ImageBaseUrl + carImage}} alt="new xuv's" />
And the output showing in the browser is
<img src=[object object] alt="new xuv's" />
If I am correct you are passing object as URL? So react sees it as object, try to do something like:
<img src={ConfigFile.ImageBaseUrl + carImage} />
Should see it as a string and should load it correctly :)
You don't have to pass an object to src, You can pass the image URL.
<img src={ConfigFile.ImageBaseUrl + carImage} alt="new xuv's" />
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 started to study angularJs directives. I have an example that I can't understand
The full source code is in the following plunker
var detailTemplate = $compile(element.find("div.detail")
.replaceWith(replacementMarkup));;
return a function.
Here the scope is global, I mean, is the scope of controller and I can see
the collection images (the recipies), I think.....
what I can't understand is how the old div is retrieved
<div class="detail">
<img ng-src="{{recipy.img}}" />
</div>
and how the right image is shown; ng-repeat is called again?
and when I do this:
detailTemplate(scope, function(detail) {
target.replaceWith(detail);
});
Thanks in advance
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}}" />
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...
}