I'm trying to get some data from my state passed down into this img
src url, and I can't seem to figure how to write it. I've tried using back
ticks and the dollar sign. I assume because I'm down in the render part
of the Component that won't work. Help me Obi-Wan, you're my only
hope.
<img src={'https://openweathermap.org/img/w/{data.weather.icon}.png'} alt='weather condition' />
Just like with vanilla JS, you have to use a Template Literal and use string interpolation to place your JS within the string (with a ${...}) like so:
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
you can use Template Literal
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
Related
I have a React component
<Text>
<div dangerouslySetInnerHTML={{ __html: apiContent}} />
</Text>
that displays HTML coming from an API that may look like the following:
<div>
<p>text</p>
<p>more text</p>
<p>more text</p>
<p>more text</p>
<p>still more text</p>
</div>
How do I insert an image, which is another React component, between the 2nd and 3rd p tag?
I know how to do it in vanilla JS, but have trouble doing it the React way.
I'd be curious to see the other answers, but I feel like inserting a React component inside some raw HTML is pretty much impossible. The options I can think of are:
use some library to turn the raw HTML into a tree of React components, and hopefully this library will also include a way to inject custom components in specific places (I don't know any such library, but there probably is one)
edit the raw HTML to insert an empty container with a unique id at the place you need it (for instance by parsing the HTML into a DocumentFragment, using vanilla JS to insert a div, turning it back into a string, and setting it as innerHTML as you already do), and then use a React portal to inject a React component into that container. Pretty messy...
If it is a react component then it is not html so not logical to put it inside dangerouslySetInnerHTML tag.
you need to rewrite this react component to an HTML string and work with the html that is coming from API as a string.
that means you can split the incoming string of html on the second closing p tag
and add the new html string in the middle.
Is there any way to pass FontAwesome as an element prop? I'm trying to do something like
<input
placeholder={" Search " + searchFor}
/>
but that will display hex code as a string rather than decode to proper font value when it will be as
placeholder=" Search ..."
Any tips on that?
You are trying to HTML-encode your UTF-8 symbol, which does not work because React is not HTML (although it looks a lot like it...)
So if you don't use the HTML-encoding but instead the JavaScript encoding "\uF002", your symbol should be displayed the way you want it.
I store some html source code in database, it's a block of code like this:
<div class="content"><h1>Page 1</h1></div>
Now in react I get them in a variable ({this.state.content}), but when I try to render them the source code got displayed as a string. Here's how I use it:
<div>
{this.state.content}
</div>
On page it just shows the source code directly. How do I get them render as html source code instead of a string?
Actually, you are trying to set raw HTML. Try this.
<div dangerouslySetInnerHTML={{__html: this.state.content}}></div>
Duplicate of this question
So I'm making calls to an API and I'm receiving data in JSONP format. I'm trying to bind this data using angular data binding such as ng-bind or using double brackets and so forth.
however, for each object I receive I get an image code that is a full html tag like so:
[object]
description: "this is a description"
image_code:"<img src='https://s3.amazonaws.com/p.image.slated.com/film/67/25/59510/1_small.jpg?get=1398992737'>"
Does anyone have any idea as to how I would bind it so that for each object i would bind the src with the given image code?
I've tried it like this
<img ng-src={{object.image_code}}>
but its not working. Any help or thoughts would be appreciated. Thanks!
Try following
<img ng-src="{{object.image_code}}">
{{object.image_code}} should be wrapped inside " " but apparently missing in your code.
plnkr working example
As your object is having image as a string. You need to extract the url part of it in your controller.
data = {
description : "something",
image_code : "<img src='https://s3.amazonaws.com/p.image.slated.com/film/67/25/59510/1_small.jpg?get=1398992737'>"
};
Then in controller use regular expression to extract the url part.
$scope.image_url = data.image_code.match(/http.*(?=')/g).join();
now your $scope.image_url will have: "https://s3.amazonaws.com/p.image.slated.com/film/67/25/59510/1_small.jpg?get=1398992737" as the value.
Now you can use it as:
<img ng-src="{{image_code}}">
I am wondering if it's possible to assign a result of a function call to an ng-src in an image?
Basically, I need to retrieve a set of thumbnails for a set of data from an aspx page, there may or may not be a thumbnail. So I need to show a different preset image for a case when there is nothing returned from the thumbnail page.
Something like this:
<img ng-src="getThumbnail({{ item.Id }})" />
Where getThumbnail is a function which makes a http request to a url such as
http://localhost/Srv/getThumbnail.aspx?id=111
I've tried this but Angular is producing this:
<img ng-src="getThumbnail(111)" src="getThumbnail(111)">
Instead of calling the function. Is there a better way for doing this?
I've commented on your question but I'll offer my suggestion as a solution after looking at the AngularJS documentation. The ng-src directive will correctly set the src attribute of img. This directive can contain Angular expressions and these can call functions contained in your controller and reachable in the current scope. Hence instead of:
<img ng-src="getThumbnail({{ item.Id }})" />
Try this:
<img ng-src="{{ getThumbnail(item.Id) }}" />
In the former declaration, the function isn't available to the Angular scope, but it is in the latter. (If I am not mistaken, as I haven't tried the code myself).
Make sure the getThumbnail function is in a controller that is reachable to the current scope.