React Img Src Path not Working - How to Import Images

Question

When you try to import any type of images inside React using the classical HTML it didn't work this is a big issue. So how to solve this problem?

<img src='./Image/Checked.png' height=50px width=50px/>

Answer 1

I spent a little bit of time researching this and I found 3 methods to solve this problem. This is why I made this Q&A style question. Hope to help other people like me out there to save some time.

Generally in HTML you will use this code

<img src='./Image/Checked.png' height=50px width=50px/>

But in React when you try to import assets like images you need a require tag. In the old versions it was enough to rewrite the code this way:

<img src={require('./Image/Checked.png')} height={50} width={50} />

The problem is that after a few updates the syntax changed a little bit and now for the images you need to use the default property to make it work. So with the new versions you actually have to use this code:

<img src={require('./Image/Checked.png').default} height={50} width={50} />

Another way to do the same think is to import the image and then use it this way:

import Image from './Image/Checked.png'
<img src={Image}  height={50} width={50}/>

To finish in only case of svg images you can import them as React Component and use them this way:

import { ReactComponent as Image } from './Image/Checked.svg'
<Image />