I'm trying to load an image asynchronously and only when it's been loaded, display it in a React app.
componentDidMount() {
const img = new Image();
img.onload = () => {
this.setState({
originalImage: img,
});
}
img.src = './images/testImage.jpg'
}
render() {
return (
<main>
{
this.state.originalImage
}
</main>
);
}
I'm getting below error:
Objects are not valid as a React child (found: [object HTMLImageElement])
I would like to know why this error is happening. Of course if I just add an <img>
tag, it works fine.
As the error says, this.state.originalImage
is an object. You probably are looking for it's src
prop, which you can use like so:
render() {
return (
<main>
<img src={this.state.originalImage.src}/>
</main>
);
}
React cannot directly display HTML Element. If you want to create elements programmatically you have to use functions provided by React.
componentDidMount() {
const url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYd74A26KhImI1w9ZBB-KvWUcasVnQRe_UOrdZPqI4GOIN0mC3EA';
let img = React.createElement(
"img",
{
src: url,
},
)
this.setState({
originalImage: img,
})
let divExample = React.createElement(
'div',
null,
`Hello World`
);
this.setState({
divExample: divExample
})
}
render() {
return (
<div>
<div>Hi</div>
{
this.state.divExample
}
<main>
{
this.state.originalImage
}
</main>
</div>
);
}
React parses jsx element like div, img, HelloWorld (custom) etc. and create React Elements out of it.
另一个想法是dangerouslysetInnerHTML——像这样?
<div dangerouslySetInnerHTML={{ __html: this.state.originalImage.outerHTML }}/>}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.