显示图像使页面空白 React JS

Question

When I add this line off code, instead of showing the image, my page gets blank. How can I fix this?

<img>
   src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"}  alt={''}
</img>

Answer 1

You are using the img tag incorrectly, Please update it as:

<img src={'https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg'} />

Also, recheck the image link as it shows unavailable.

Answer 2

src is not the child component of tag. src is a attribute of tag.

<img src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"}  alt={''}

/>

check https://www.w3schools.com/tags/tag_img.asp for details.

Answer 3

img is self closing tag and it's required the src attribute. correct way to use img tag is:

<img src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} />

check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img for more information