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...
}
Related
I have a simple react app, and im trying to add a simple loading overlay.
I saw the most common usage is react-loading-overlay.
My main app.js structure looks like that, I have a simple menu and a deck.gl map
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):
<LoadingOverlay
active={isActive}
spinner
text='Loading your content...'
>
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
</LoadingOverlay>
But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).
Why wrapping my component with the LoadOverlay component causes the whole page to look weird?
Do I need to "play" with the CSS for the LoadOverlay component?
I'm having a bit of trouble working out why my images aren't rendering properly inside of an ng-repeat with an ng-init, ng-mousover and ng-mouseout.
<div ng-repeat="item in product.items">
<div ng-init="imgsrc='{{item.image01}}'"
ng-mouseover="imgsrc='{{item.image02}}'"
ng-mouseout="imgsrc='{{item.image01}}'">
<img ng-src="{{imgsrc}}" />
</div>
</div>
The correct paths are rendering inside of ng-init, ng-mouseover and ng-mouseout, but the <img> tag is only updating with {{item.image01}} and {{item.image02}} instead of the actual image paths.
What am I missing here?
remove the braces, for assigning values to variables you don't need them inside ng-init.
<div ng-repeat="item in product.items">
<div ng-init="imgsrc=item.image01"
ng-mouseover="imgsrc=item.image02"
ng-mouseout="imgsrc=item.image01">
<img ng-src="{{imgsrc}}" />
</div>
</div>
It's fine to assign a value with ng-init, but ng-moseouver and ng-mouseout don't work the same.
Try to create a function and pass it to them:
ng-mouseover="handleMouseover()"
ng-mouseout="handleMouseout()"
Then update the value of your variable inside of the methods accordingly.
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}}" />
I have the following markup:
<div class="liveResults">
<div><img ng-show="home!==undefined" ng-src="{{homeImg}}"> </div>
<div>0:0</div>
<div><img ng-show="guest!==undefined" ng-src="{{guestImg}}"> </div>
</div>
Inside my controller I fill the data the following way:
$scope.init=function() {
$.getJSON("http://www.example.com/somedata.json", function(result){
$scope.home=result.home;
$scope.guest=result.guest;
$scope.homeImg=$scope.BigImage($scope.home);
$scope.guestImg=$scope.BigImage($scope.guest);
$scope.$apply();
return;
}
}
That function is run by ng-init="init()"
now the ng-src is filled correctly, but ng-show does not work as expected (the images are still hidden) I can see using the browsers devtools, that the images are there, but with a width and height of "0".
When I start the function a second time by assigning it to an ng-click-event, the images are shown correctly.
My guess would be that the combination of "ng-init" and "$scope.apply" causes the problem.
The ng-src directive already have an implicit ng-show in it, so as the comments in you question illustrate this should work for you already:
<div class="liveResults">
<div><img ng-src="{{homeImg}}"> </div>
<div>0:0</div>
<div><img ng-src="{{guestImg}}"> </div>
</div>
I think some sample code can explain my purpose.
Some html code with angular:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button ng-repeat="button in buttons">{{button}}</button>
</div>
</div>
You can see there is a custom directive "show-result-as-text" which I want to define. It should render the inner html code with angular directives, then show them as text.
The final html should be:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button>add</button>
<button>edit</button>
<button>delete</button>
</div>
</div>
And when the buttons value changes, the escaped html should also be changed.
I've tried to write one myself, but failed after 2 hours of work.
UPDATE
A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw
The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/
Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.
Note: I don't like the solution but it works, so I decided to share it...