i can't display the image in my website, which is fetched from the API.
this is my image fetching/showing code.
this.state.filteredData.map((data,i) =>
<div>
<span>{data.details.name}</span>
<br/ >
<img source={{uri:data.details.image}} style={aStyle} />
<br/>
<span>{data.details[ 'section of law' ]}</span>
<br />3
<span>{data.details[ 'type of person' ]}</span>
</div>
const aStyle={
width:300,
height:360
};
only image box is showing.
<img src={{uri:data.details.image}} style={aStyle} />
image has src attribute and you can pass image url string or base64 image data to it.
<img src={data.details.image} style={aStyle} />
Related
I have this simple react component that gets data from an API (fetch called in UseEffect), and displays it using HTML. When I refresh the page, all html disappears from the page and it goes blank. What's peculiar is that when I instead make some changes in the code editor and let react autoupdate the page after saving, it displays everything just fine.
Here's the code snippet for the component:
export function AgentCard(props){
console.log("agentcard function");
const [agentData,setAgentData] = useState({});
useEffect(()=> {
console.log('running useEffect')
axios.get('https://valorant-api.com/v1/agents/').then(res=>{
var agentRes;
for (const agent of res.data['data']){
if (agent['displayName'] === props.agentName){ agentRes = agent}
}
setAgentData(agentRes);
console.log(agentData)
})
},[])
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
<div className='AbilitiesBar'>
<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
</div>
</div>
</div>
)
After some digging and logging, what I found is that when I refresh the page, the state (agentData), is saved to this:
https://imgur.com/a/QzfIdpm
and get the following error in the console:
https://imgur.com/a/H7gLiTQ
But once I make any change to the editor and let react autorefresh, the logs show that the state agentData has the right data object pulled from the API.
Also, this only happens when I have the following part of the code running
<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
Once I comment this out, everything displays correctly even after a browser refresh
I know the way I've posed the question is confusing, but I'm new to front end development and don't really know what I'm supposed to look for here.
Probably because agentData.abilities returns undefined (remember that you have an empty object that is asynchronously populated), but you're trying to access it in your template as if an array is present.
You can solve this easily if you conditionally render those <img> elements when agentData.abilities is not undefined, i.e.:
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
{agentData.abilities && (
<div className='AbilitiesBar'>
<img src={agentData.abilities[0].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[1].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[2].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[3].displayIcon} className='AbilitiesIcon' />
</div>
)}
</div>
</div>
)
Even better: you can simply iterate through the first 4 entries in agentData.abilities to keep your DOM a bit simpler:
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
<div className='AbilitiesBar'>
{agentData.abilities && agentData.abilities.slice(0,4).forEach(ability => (
<img src={ability.displayIcon} className='AbilitiesIcon' />
)}
</div>
</div>
</div>
)
sorry for this dummy question but i am having a trouble in my django and react app.
i have an endpoint which serves the image name but the image is saved in my local directory and in my react app i just want to append the file name like this
function Condition(props) {
let src = C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
return (
<>
<div className="item">
<a href="#">
<img src={src} alt="medicine item image" />
<div className="desc">
<p className="medicinename">{props.meddata.title}</p>
</div>
</a>
</div>
</>
);
}
If the question is how to refer to a local file, then use the file URI:
file:///C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
Try:
<img src="" alt="description">
Is there any function or command that I can use to take the "pop-up" picture from this function:
<a class="thumbnail" href="#thumb">
<img src="productURL" width="100px" height="142px" border="0" />
<span>
<img src="productURL" />
<br />
<font face="arial">productname</font>
</span>
</a>
Be displayed in a table located to the right of the page?
Notes:
I'm using Dreamweaver CS6
Maybe there's a way to put, inside a class, that the pop up has to be shown inside a table, defined earlier?
EDITED
you can do that by this
in your html table cell tag add an id
HTML
<img src = "xyz.png" onmouseover="showimage();" onmouseout="hideimage();" />
and for table
<table><tr><td id="showimage"></td></tr></table>
Javascript
function showimage()
{
document.getElemtnById('showimage').append('<img src="xyz">');
}
function hideimage()
{
var elem = document.getElemtnById('showimage');
elem.removeChild(elem.childNodes[0]);
}
Regards.
I am writing an app for my school newspaper, which is run completely online through wordpress. I am using Hpple to parse the html. From the following:
</div>
<div id="fs-2" class="fs">
<div id="fsh-2" class="fsh">
<div id="fdh-2" class="fdh">Hit or ‘Mis’: Les Miserables Review<br> by *******</div>
<img src="http://www.mabearnews.com/wp-content/uploads/2012/12/les-miserables-2012-wallpapers-les-miserables-2012-movie-32697313-1280-800-600x375.jpg" id="fph-2" class="fph" />
What xpath query string would return the image url (img src)?
The html content is not well-formed.
Assuming this is the proper html content:
<div id="fs-2" class="fs">
<div id="fsh-2" class="fsh">
<div id="fdh-2" class="fdh">Hit or ‘Mis’: Les Miserables Review<br> by *******</div>
<img src="http://www.mabearnews.com/wp-content/uploads/2012/12/les-miserables-2012-wallpapers-les-miserables-2012-movie-32697313-1280-800-600x375.jpg" id="fph-2" class="fph" />
</div>
</div>
You can get the image URL with this xpath query:
//div[#id="fsh-2"]/a/img/#src
Hey most of my issue has been solved but i have little problem
This is Html
<tr>
<td class="ttl">
</td>
<td class="nfo">- MP4/H.263/H.264/WMV player<br />
- MP3/WAV/еAAC+/WMA player<br />
- Photo editor<br />
- Organizer<br />
- Voice command/dial<br />
- Flash Lite 3.0<br />
- T9</td>
</tr>
Currently i am using this code provided by Stackoverflow User
var text1 = htmlDoc.DocumentNode.SelectNodes("//td[#class='nfo']")[1].InnerHtml;
textBox1.Text = text1;
know problem its is getting all text
with <br>
how i can remove <br> from it and put , between them
its should look like this
MP4/H.263/H.264/WMV player,- MP3/WAV/еAAC+/WMA player,- Photo editor,- Organizer,- Voice command/dial,- Flash Lite 3.0,- T9
Also how to get this
<div id="ttl" class="brand">
<h1>Nokia C5-03</h1>
<p><img src="http://img.gsmarena.com/vv/logos/lg_nokia.gif" alt="Nokia" /></p>
</div>
i am trying this
var text41 =
htmlDoc.DocumentNode.SelectNodes("//div
id[#class='brand']")[0].InnerText;
i get invalid token error
i only want C5-03 without nokia text
You can simply use a string.Replace("<br />", ""); to remove the <br /> tags.
Better yet, use the InnerText instead of InnerHtml, so no HTML comes through:
var text1 = htmlDoc.DocumentNode.SelectNodes("//td[#class='nfo']")[1].InnerText;
If you really want to replace all <br /> tags with a , you will indeed need to use Replace:
text1.Replace("<br />", ",");
To select the value in the <H1> tag, you could use:
var text42 = htmlDoc.DocumentNode.SelectNodes("//div[id='ttl']"/h1)[0].InnerText;