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}}" />
Related
I have images in a folder saved as the users name. I want to display a clickable image from the (name of user).png. Using AngularJS
This is wrong but this is what I mean, I know I cannot use src with a function in it:
{{currentUser.name}} //the function
<md-button ng-click="Popup()"><a><img src="{{currentUser.name}}.png " width="200" height="200"></a> </md-button>
currentUser is a function ?
you're using it as an object. share your javascript.
Try using ng-src instead of src. :)
Change the src by ng-src.
Checkout the manual about ng-src:
https://docs.angularjs.org/api/ng/directive/ngSrc
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
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.
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!