Html-react-parser: Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`
Hi!
Great plugin, really think this is going to be helpful for what I'm working on.
I noticed that parsing any img-element causes the above error. This may also apply to any element that never should have child elements.
A temporary workaround is to use something like this:
const parserConfig = {
replace: domNode => {
if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
}
}
};
poacher2k
All 14 comments
Thanks for letting me know. Do you have an example so I can reproduce this error?
remarkablemark
on 26 Aug 2016
Hi!
You can reproduce this with the following:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));
poacher2k
on 29 Aug 2016
Awesome, thank you!
poacher2k
on 29 Aug 2016
@poacher2k Thanks for the example. I've looked into the bug and made a fix in #16.
Try npm update html-react-parser or npm install [email protected] and let me know if this removes the error for you.
remarkablemark
on 29 Aug 2016
That fixed it, thanks again! Glad to see you also added checks for other void elements!
poacher2k
on 29 Aug 2016
Great to hear and you're very welcome! 👍
remarkablemark
on 29 Aug 2016
@remarkablemark I am still facing the issue and npm install [email protected] code is not updated in this version.
vidit1
on 5 Jan 2018
@vidit1 Can you confirm that you installed the latest version?
npm i html-react-parser@latest
# or
npm i [email protected]
Then verify by doing:
npm ls html-react-parser
@remarkablemark I updated the latest version html-react-parser and still face this issue. My element is inside a material-ui component.
<Drawer>
<div className="alert" role="alert">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" className="d-inline-block align-top" alt="">
Bootstrap
</img>
</div>
</Drawer>
blueskysmart
on 12 Jan 2018
@blueskysmart : You have the text "Bootstrap" inside your img-tag. As the error says, img is a void element, and cannot have any children.
See @remarkablemark 's comment below for guidance on how to fix it.
poacher2k
on 12 Jan 2018
@blueskysmart The comment made by @poacher2k is correct. You can see the reproduction of this error in this fiddle.
remarkablemark
on 12 Jan 2018
Okie, I see. Thank you.
blueskysmart
on 22 Jan 2018
This error comes up also if you only try to parse this:
<img src="img.jpg".>
To make it work, wrap it in a div:
<div>
<img src="img.jpg".>
</div>
cipiripper
on 31 Oct 2018
I was running into this issue because I was trying to add children to an img tag...
Sshetty2
on 28 May 2019
Related issues
kartikag01
·
5Comments
purp1eeeee
·
15Comments
on2air
·
3Comments
linkurzweg
·
8Comments
rscott78
·
11Comments
Most helpful comment
I was running into this issue because I was trying to add children to an img tag...