I use ng-src to load images. Value is loaded from some scope variable, like this:
<img ng-src="{{currentReceipt.image}}"/>
My issue is that when I run delete $scope.currentReceipt, it makes ng-src attribute empty but doesn't reflect it in src attribute. So as a result I keep seeing that image where I need empty placeholder.
How can I deal with it?
This is the expected behaviour from the ngSrc and ngHref directives. These directives only support recognising new paths, but when path is not available, the directives will exit silently (I see a pull request here.).
So a possible workaround could be to use ngShow along with the ngHref to hide the tag altogether when image variable is not available anymore:
<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />
call $scope.$apply() after delete $scope.currentReceipt.
The following solution works for me:
<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />
You can actually check for length and do
<img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">
Related
When I add this line off code, instead of showing the image, my page gets blank. How can I fix this?
<img>
src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} alt={''}
</img>
src is not the child component of tag. src is a attribute of tag.
<img src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} alt={''}
/>
check https://www.w3schools.com/tags/tag_img.asp for details.
You are using the img tag incorrectly, Please update it as :
<img src={'https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg'} />
Also, recheck the image link as it shows unavailable.
img is self closing tag and it's required the src attribute. correct way to use img tag is:
<img src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} />
check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img for more information
My code consists of img tag which fetches image dynamically.
<img src="{{'http://example.com/'+category.name+'.png'}}">
What I want to do is write Javascript code to replace & from the category name i.e.
<img src="{{'http://example.com/'+category.name.replace("&", "AND")+'.png'}}">
But Angular gives me the error when I write JS inside of the src binding. Please help me to fix this!
You are using double quotos within double quotos try this -
<img src="{{'http://example.com/'+ category.name.replace('&', 'AND')+'.png'}}" />
Either you can bind this way too
<img [src]="'http://example.com/'+name.replace('&', 'AND')+'.png'" />
You can do something like this.
<img [src]="createUrl()">
in the .ts file.
public createUrl(): string {
return `http://example.com/${category.name.replace("&", "AND")}.png`;
}
Escape the double quotes properly.
<img src="{{'http://example.com/'+category.name.replace(\"&\", \"AND\")+'.png'}}">
This might be a silly question but I'm trying to concatenate the source of an image in React to be rendered on the screen, but it's not working.
<img src=`https://www.cryptocompare.com/{this.state.cryImage}` />
In this.state.cryImage, I only get the second half of the link (I'm pulling data from an API) so for example it would be something like:
media/19633/btc.png
Am I concatenating incorrectly or is this just not possible?
You've missed $ sign and brackets for attribute
<img src={`https://www.cryptocompare.com/${this.state.cryImage}`} />
You forgot to add {} in src prop:
<img src={`https://www.cryptocompare.com/${this.state.cryImage}`} />
I've an AngularJS page and I want it to change ng-src value of an element when clicking on another element. I intialized variable src:
data-ng-init="src='assets/img/projects/1'
Then I made this element:
<img data-ng-src="{{src}}/1.jpg" id="img1">
And finally I want when someone clicks on my link, It change that src to {{src}}/1a.jpg, So I tried this:
(Don't care about my empty link, I know how to click on it...), My problem is, The value of src doesn't change and My page is still the first image, How can I improve my code to change value {{src}}/1.jpg to {{src}}/1a.jpg?
Very very wrong code, You combine standard DOM modification with angular. Choose only one solution not combine in this way. Check my example code:
var app=angular.module("image",[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="image" ng-init="src='https://www.gravatar.com/avatar/161dac2e231b0f6b4340000328e18bcf?s=328&d=identicon&r=PG&f=1'">
<img data-ng-src="{{src}}" id="img1">
<button ng-click="src='https://www.gravatar.com/avatar/a5af44879d481c3c15a4b2dd55007322?s=328&d=identicon&r=PG'" >Change image src to different</button>
</div>
So only set src scope variable to different src and it works like a charm.
ng-click="src='different src'"
Create new varibale image
data-ng-init="src='assets/img/projects/1'; image='1.jpg'"
Then HTML Element
<img data-ng-src="{{src}}/{{image}}" id="img1">
If someone clicks on you link the change the image value
Hope this helps ! Thanks.
Set ng-click to function in your controller, that changes "src" variable in your scope.
I would like to ask, so I came across this angular image compress function which works great as per what I want. I have successfully implement it to work but there is 1 problem, the compress function returns me with a base64 encoded image which is stored in a local $scope and can only be called in the html page itself if I am not mistaken like such.
<td style="width: 15%">
<div class="canvas-wrapper">
<img class="canvas-image" ng-src="<%image1.compressed.dataURL%>"/></div>
</td>
<td>
<input id="inputImage" ngf-select ng-model="statusData.file" ngf-multiple=false type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.5" resize-type="png" />
</td>
In order for me to get the compressed image I have to echo the base64 code by calling <%image1.compressed.dataURL%>
Now my problem is how should I pass this value into the $scope model that i have created specifically to store this value? I tried doing something like
<%$scope.imageCache.data = image1.compressed.dataURL%> but it did not work.
I need the conpressed data to be passed into my custom module so I can perform other actions with the image.
Here is a Demo of the code working code
Hopefully someone can help me in such scenario.
Update 1: Found a temporary cheating workaround is by calling ng-click="image1 = null" when user click on the icon.
ng-src is a directive that evaluates its content. Thus you should provide a value from your $scope.
<img class="canvas-image" ng-src="image1.compressed.dataURL"/>
This will provide the data given that in $scope.image1.compressed.dataURL you have correct data.
So without using ng-src it would be
<img class="canvas-image" src="{{image1.compressed.dataURL}}"/>
Or with your modified interpolation symbols
<img class="canvas-image" src="<%image1.compressed.dataURL%>"/>