How to write Javascript inside of Angular Binding? - javascript

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'}}">

Related

How do I pass a variable inside my img src in the following :<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>

I am trying to pass a variable snAvatarSnuid inside the img src after facebook.com/ and before /picture as below
<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>
Note: 1) https://graph.facebook.com/ & /picture part of src remains same only the value of snAvatarSnuid has to be added in between.
2) snAvatarSnuid is defined in data of Vue component
where am I wrong ? how do I solve it ?
You have to bind. Moreover you have to use quotes in a proper way:
<img alt="Avatar" :src="`https://graph.facebook.com/${snAvatarSnuid}/picture`">
When you bind attributes, everything inside the quotes will be treated as a javascript.
Simply replace your back tilts with quotes and enclose your variable in double brackets:
<img alt="Avatar" src='https://graph.facebook.com/{{snAvatarSnuid}}/picture'>

Is it possible to concatenate an img src in React?

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}`} />

Nesting quotes in HTML > JavaScript > WebForms or how to call a .NET method in a JavaScript method

Who would think so, but I actually need 3 levels of nested quotes in an ASP.NET WebForms page.
Here's what I have:
<img
src='<% ResolveClientUrl("~/SwissStyleguide/img/swiss.svg"); %>'
onerror="this.onerror=null; this.src='SwissStyleguide/img/swiss.png';"
alt="Confederatio Helvetica"
/>
Now, the first part, assigning a dynamically created URL to the src attribute works fine. The server resolves the given special URL and creates an absolute link for the client to fetch.
But the onerror handler is more tricky: since the src URL to the png image is already in an expression with double quotes, I can not invoke the ASP.NET ResolveClientUrl method, which strictly requires double quotes for the string argument.
I tried to do it like this (does not work!)
<img
src='<% ResolveClientUrl("~/SwissStyleguide/img/swiss.svg"); %>'
onerror="this.onerror=null; this.src='<% ResolveClientUrl("~/SwissStyleguide/img/swiss.png"); %>';"
alt="Confederatio Helvetica"
/>
But without much surprise, Visual Studio complains about this string. The only idea that comes to my mind is to use a string constant to avoid having the innermost quotes, but that seems very ugly.
Is there a way to escape or otherwise specify some or all of the quotes to make that work?
Note: I know about this question: When to use double or single quotes in JavaScript? but changing the quotes does not help in this case.
Well,... this turned out as an instance of the "<%$, <%#, <%=, <%# … what's the deal?" WebForms problem, answered perfectly here: https://stackoverflow.com/a/957321/79485
The solution is to use the equal sign after the percent sign and omit the trailing semicolon. Like this:
onerror="this.onerror=null; this.src='<%= ResolveClientUrl("~/SwissStyleguide/img/swiss.png") %>';"
I'll leave the question and this answer here as a reminder of anyone tripping over this too.
How about placing the attributes from the code-behind instead?
.aspx
<img id="image" runat="server" alt="Confederatio Helvetica" />
.aspx.cs (Page_Load)
image.Attributes.Add("src", Page.ResolveUrl("~/SwissStyleguide/img/swiss.svg"));
image.Attributes.Add("onerror", "this.onerror=null; this.src='" +
Page.ResolveUrl("~/SwissStyleguide/img/swiss.png") + "';";

AngularJS doesn't update img src when model changes

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}}">

How do I write the following as a regular expression to replace multiple occurances?

Background:
I have string of html with about 10 image tags that passes through some JavaScript as a string at runtime before being injected into a containing element. The data-thumb tag of each image is slightly incorrect and needs to be altered before making it into the DOM. Here is an example:
<img src="foo_lg_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_lg_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_lg_db.jpg" data-large="fizz_lg_db.jpg" />
Needs to become:
<img src="foo_tn_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_tn_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_tn_db.jpg" data-large="fizz_lg_db.jpg" />
Question:
In JavaScript (jQuery is OK), how do I achieve this search and replace?
THE ANSWER:
Thanks to Mark's answer I learned that it is possible to instantiate a jQuery object before it hits the DOM so, rather than using regex, I did something like this:
var stringHtml = "<img . . .";
var div = $("<div>").html(stringHtml );
$.each(div.find('img[src]'), function () {
$(this).attr('src', $(this).attr('src').replace('_lg', ''));
});
return div.html();
$('img[data-thumb]').each(function() {
$(this).attr('data-thumb', $(this).attr('data-thumb').replace('_lg_','_tn_'));
});
Something like that in jQuery.
Sounds like a problem you should be fixing server-side if possible though.
If you give jQuery an HTML element like $('<div>') it will essentially create the HTML element for you and then you can manipulate it before inserting it into your DOM. I don't know if it will handle multiple elements, but you can create a container first (like above) and then set the content like so
$('<div>').html(yourHtml).find('img[data-thumb'])./* code above */

Categories