I have an ng-src attribute within an image tag that is loaded as a string from the template property of a directive, which supposed to load an image selected by the user. However when the page loads, the console outputs a 404 since there is no image selected and ng-src is loading an empty image. What I currently have is this
"<img ng-src="myserver.com/{{imagesPath+ selectedImage}}"></img>"
but whenever selectedImage is an empty string I get the empty request.
What I tried changing it to was
"<img class='snapshot' ng-src='{{selectedImage.length? \'myserver.com\' + imagesPath +selectedImage : \'\' }}'></img>"
And this does not work. What is the correct syntax?
I had the same problem, using the ng-if solved it (Thanks for that!!). Although I had to change the way that the string is concatenated inside the ng-src:
ng-src="{{'myserver.com/'+ imagesPath}}"
You should check selectedImage.length> 0, so that whenever there is selected image found it will create an src path
"<img class='snapshot' ng-src='{{selectedImage.length> 0 ? \'myserver.com\' + imagesPath +selectedImage : \'\' }}'/>"
Better way would be hide that img tag from html when there is no image using ng-if directive.
"<img ng-if="selectedImage.length > 0" ng-src="myserver.com/{{imagesPath+ selectedImage}}"/>"
Related
I have 10 icons where each one for different types of alerts. I'm getting the type value from a service. I need to change the icon and style of text based on the type I'm getting from service. I'm using ng-src for changing the images.
<div ng-src="{{type=='0' : 'img1.png' : (type=='1' : 'img2.png' : ())}}"></div>
<div ng-class="{{class1: type=='1'}}">Some text</div>
Is there a better way to do this?
You can just set the icon img source in controller. Or even set the img source like:
$scope.iconSrc = "img" + type + ".png";
And use in template. Same login for class.
I had an angular code for an image like <img class="testClass" ng-src="{{ImagePath}}" alt="{{imageName}}" />
However when after the page loads, I see an src attribute to the img tag as shown below.
<img class="testClass" ng-src="/files/imageName_1.jpg" alt="Image 1" src="/files/imageName_1.jpg">
So, does angular add src attribute as well by default?
Example jsfiddle http://jsfiddle.net/wktwL/5/
If we inspect the element on the output image, we can see both ng-src and src attributes.
Yes, angular adds the appropriate HTML tag's attribute for all the valid ng-* directive.
Basically, you add the 'ng-src' for an element; When angular starts the parsing of the HTML and it encounters the 'ng-src' attribute it tries to find the registered 'ngSrc' directive when found it invokes that directive and that directive's logic adds the src tag.
From the AngularJS website:
Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
Yes, AngularJS add the appropriate HTML tag attribute for valid ng-* directive.
AngularJs is always convert directive to html tag.
Yes, the way I see angular implementation and docs, angular adds the src attribute to img tag along with ng-src attribute
AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
{{checking}}
Result in HTML page in browser:
<div>check</div>
Now what I want is that the $scope.checking variable be parsed in HTML as if it's a tag I defined.
So the result in html page should be:
check
and the above should come in red color
Any way to do it? hopefully its simple... AngularJS experts please help!
i got the output but the string doesnt come in red! the style tag is ignored! how can i do it? do i use interpolate?
Use ng-bind-html!
Here is the docs-page for ng-bind-html. This will help you.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
ng-bind-html will render your html-string in the browser.
Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/
When I am going to bind data in angularjs variable like..
$scope.msg = '<div class="success_msg">Message</div>';
<span ng-bind="msg"></span>
but its show with div tab also. I dont want to show html elements. I want to show only Message in this span.
What is the solution?
When you need to bind html fragments, you have to use mg-bind-html.
You can find the documentation here: https://code.angularjs.org/1.2.16/docs/api/ng/directive/ngBindHtml
(don't forget to add ngSanitize to your module dependencies)
I want to set an image dynamically having the path of the image setted in a scope. The problem is that this is seen as a text, the value of selectedEvent.eventBannerImage is shown correctly, in my case the final url looks something like this:
background-image: url('/mydomain/images/banners\444b6e91-30fe-478b-a3d3-7984f0d35e69__1253402730_2873_full-269x300.jpg'), but it doesn't appear like a link as I need but just as a text. The image isn't shown.
<div style="background-image:
url('${pageContext.request.contextPath}/images/{{selectedEvent.eventBannerImage}}')">
please see here: http://jsbin.com/zehawu/1/edit
ng-style="{'background-image':
'url({{pageContext.request.contextPath}}/images/{{selectedEvent.eventBannerImage}})'}"
You will need to use a directive for the binding -- probably ng-style. Unfortunately, ng-style takes an expression, not a string, so you can't use concatenation inside of it.
<div ng-style="ctrl.bgImage">
// In the controller:
this.bgImage = {"background-image":
"url(" + this.pageContext.request.contextPath
+ "/images/" + this.selectedEvent.eventBannerImage + ")"
};