Is it possible to concatenate an img src in React? - javascript

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

Related

Display image makes page blank React JS

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

error with my img src using react, photo is not displaying

I keep having difficulty trying to render out images onto my site. I've tried several ways to return my img src such as:
1. <img src={require('../../blogPostImages/' + post.blogImage)}
alt="Post Image"/>
2. <img src={require(`../../blogPostImages/${post.blogImage}`)} alt="Post Image" />
3.<img src={'../../blogPostImages/' + post.blogImage'} />
I had a similar issue before, and I imported the image at the top of the file and it worked. I tried doing the same thing this time and it's not working. This is what I am trying to import:
import Img from '../../blogPostImages/' + post.blogImage;
and returning the import as:
I feel like I my directory is correct, I am currently in my blogPost>index.js trying to access my blogPostImages. Thanks for the help in advanced!
Directory
Broken image icon

How to write Javascript inside of Angular Binding?

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

How to replace all img tags in HTML string with <a><img></a>?

I have HTML string and I open it in UIWebView. Now, I want to make all my images clickable, to put them into link tags like:
Was:
<img src="..." />
Became:
<img src="..." />
Is there any easy solution?
I've tried to find all tags and replace them inside of the string, but it was very painful.
I've tried that:
let js = "var a=document.createElement('a');a.href='http://mylink.com';var image = document.getElementById('mydiv').getElementsByTagName('img')[0];b=a.appendChild(image);document.getElementById('mydiv').appendChild(a);"
self.webView.stringByEvaluatingJavaScriptFromString(js)
but it did not help me
Short answer: No, there is not an easy solution. Don't do that. Trying to parse and change HTML source from a client app is a horrible idea, and will always be very painful. It's kind of like trying to perform brain surgery on yourself with a sawzall, a mirror, and some old dental tools.

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

Categories