React render <img> tag

Question

For the following react code:

ReactDOM.render(<div className="divcss5">
   <img src={'/auto_merge_deployment.png'}
         alt="Auto Merge Deployment"
         align="bottom"
         id="auto_merge_deployment"
         style={style}>Auto Merge Deployment</img>
    <br></br>
    <p><i className="fa fa-spinner fa-spin fa-3x fa-fw"
           style={{fontSize: "1.73em"}}
    ></i>Icon</p>
</div>, document.getElementById("icon_tip_div"));

I got:

Error: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML . in img in div

Is that because the src is not formatted properly or the path is wrong, and it cannot find the image?

Answer 1

The only thing what went wrong is <img> tag should not have a closing tag, that needs to be removed first. Read from the documentation :

The HTML <img> element embeds an image into the document.

Also in w3schools :

In HTML the <img> tag has no end tag.

I would remove the closing tag as the following:

<img src={'/auto_merge_deployment.png'}
     alt="Auto Merge Deployment"
     align="bottom"
     id="auto_merge_deployment"
     style={style}>Auto Merge Deployment

I hope that helps!

Answer 2

ReactDOM.render(<div className="divcss5">
   <img src={'/auto_merge_deployment.png'}
         alt="Auto Merge Deployment"
         align="bottom"
         id="auto_merge_deployment"
         style={style} />
    <br></br>
    <p><i className="fa fa-spinner fa-spin fa-3x fa-fw"
           style={{fontSize: "1.73em"}}
    ></i>Icon</p>
</div>, document.getElementById("icon_tip_div"));

You don't put content in an img , even just with normal HTML.