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="" >
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
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 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!
In Canada, we have a new law that you must have ALT tags for images but when my page loads, the fotorama plug-in seems to remove them from the code. Is there a workaround or something that I can do?
I have been in a same situation like you are now.
Fotorama seems to discard and totally remove alt and title tags as not necessary in its purposes.
You need to raise a bug in its bug tracking system so that in its future releases it may include this tag particularly and all the other HTML standard tags that blindfully it discards.
In order to show the Alt and Title in image use the image with in DIV.
Use :
<div><img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/></div>
Instead of :
<img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/>
Just want to let you(other) know. Issue with stripping "Alt", "Title" attributes have been fixed (I really like this dll, and this issue used to freak me out), I asked owner to pull fix.