How to make the above codes work by using one <img>. I mean I want to use only one <img> but the conditions are the same. For now I'm using 2 img for condition and it's not good. How can I make it to use one img only. Any help?
<img ng-if="!image[$index].dataUrl" ng-src="/upload/image/rotation_banner/{{row.Image}}"/>
<img ng-show = "image[$index].dataUrl" ng-src="{{image[$index].dataUrl}}" />
Try this out:
<img ng-src="{{image[$index].dataUrl ? image[$index].dataUrl : '/upload/image/rotation_banner/' + row.Image}}" />
Hope this helps.
Related
I have an AngularJS project and I am trying to show an image from local folder.
My folder hierarchy is like this:
--app(folder)
-----controllers(folder)
-----services(folder)
-----views(folder)
--------images(folder)
-----------image1.jpg
-----------image2.jpg
-----------image3.jpg
--------persons.html
--------departments.html
--index.html
I have in image address in personsController.js:
$scope.fooImageAddress='images/image1.jpg';
and in person.html:
<img ng-src="{{ fooImageAddress}}" alt="here should be an image"/>
And nothing shows, just alt message if img.
What can I do?
I've read this question, this and this, and tried suggestions, nevertheless there is no result.
You must change your address, relative to your index.html file
So I suppose app/views/images/image1.jpg
it is look like wrong path from a controller the path is different:
$scope.fooImageAddress='../views/images/image1.jpg';
if is was from person page , you was right.
why are you using "ng-src" and not src if is only one image but use like that
<img ng-src="{{'images/'+imageName+'.jpg'}}" alt="here should be an image"/>
$scope.imageName = image1;
Please try this one, "fooImageAddress" is a parameters.
<img src= "assets/images/{{fooImageAddress}}" />
I have a lot of images that unfortunately have spaces in their URL's. These are submitted through user input in another system and saved to a database.
I'm having a problem with angular's management of image sources. It doesn't seem to like spaces or "%20" in the ng-src or src attributes.
This
<img ng-src="{{smallImg}}" alt="" />
Will output this
<img ng-src="" alt="" />
While this
HERE
will output this
HERE
Is there a way to do this without having to go back and rename all these folders?
I got the answer, it is working for me.
You can get this like:-
$scope.smallImg = "http://example.com/path to my/image with/spaces.jpg";
when you bind this do like
<img ng-src="{{smallImg .replace(' ','')}}" alt="" >
I haven't been able to make <img> src empty when using %20, but perhaps you're using an older version of Angular.
$scope.smallImg = "http://www.google.com/my images here/pic.jpg".replace(/ /g, "%20");
...
<img ng-src="{{smallImg}}" alt="Pic goes here" />
Here's a working demo: https://plnkr.co/edit/hTFw8rAg0CRxDGjROjjp
(tried to find an image on the web that had a space in the name, but no luck)
Well, as it turns out it was a secondary plugin, magic360 that was interfering with the image source
I want a simple determination if the image source exists or not, so that I can replace the image with a default image. Best case would be if this would be possible in pure html maybe with "ng-if" or something like this.
<img ng-if="../images/{{id}}.png" src="../images/{{id}}.png">
This code obviously doesn't work, but I think it shows what I want.
EDIT:
New Code I got, which could work in my opinion, but doesn't work:
<img ng-src='{{ "../images/{{id}}.png" || "../images/img.png" }}'/>
Debugger says something about wrong quotes in this case.
EDIT:
I think the second solution works, there is just some bug in this part:
<img ng-src='{{"../images/{{id}}.png"}}'/>
This part works:
<img ng-src='{{"../images/img.png"}}'/>
You can use onerror, here is a demo.
<img ng-src="http://experenzia.com/images/431f5cfa87f2faf9317ccc89e980dcca/431f5cfa87f2faf9317ccc89e980dcca_t.jpg" onerror="this.src='http://www.experenzia.com/assets/images/planner/no-image-back.png'" alt="" >
I have BB10 cordova app,
In view I have
<img ng-src="{{'someImageLink'}}">
And some local images not showing, there is blue question mark.
But if I will change to
<img src="someImageLink">
img works perfectly
Changing to
<img src="{{'someImageLink'}}">
not helping at all
Can't diagnose, do you mby have any ideas or know how to fix this issue on BB10?
You're close! Since Angular already evaluates the contents of ng-src, you do not need to wrap your expression in {{ }} braces:
$scope.imageLink = "image.png";
<img ng-src="imageLink">
After being evaluated, this will leave you with the equivalent of this, in the DOM:
<img src="image.png">
If you're using a hardcoded string to a local image file, and it will never ever change in your app, there's nothing wrong with using src="image.png" directly.
I hope this helps!
I have an image on my page like so:
<img ng-src='http://someurl.com/image.png?parameter={{selected.id}}' />
Is there any way in Angular to prevent ng-src resolution until after {{selected.id}} is set? Basically i do not want to load image until selected.id is set. To set selected.id I need to make Ajax call. What I am experiencing is two calls for the image.
First one with url like so http://someurl.com/image.png?parameter=
Then the second (correct) call after selected.id is set
It seems that this should be easy to do but I cannot think of a way.
Thank You,
Victor
You can use ng-if so the img tag will actually be removed until selected.id is truthy. This means the request for the image won't be made until selected.id is set.
<img ng-src='http://someurl.com/image.png?parameter={{selected.id}}' ng-if="selected.id" />
You can use ng-show directive
<img ng-src='http://someurl.com/image.png?parameter={{selected.id}}'
ng-if="selected.id" />
You can find some demo here :http://jsbin.com/fatote/5/edit?html,js,output