How to use images with React!

Hey fellow creators,

Let's learn how to use images with React!

If you prefer to watch the video version, it's right here :

Start by creating a simple React app. You can use Unsplash to find an image you'd like to use for you app!

1. The first way to use an image with React.

Inside of your component App, add an img tag and add the source code inside src.

<div className="App">
    <h1>Images react</h1>
    <img src={"https://images.unsplash.com/photo-1637984135921-301a7d39e3b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1315&q=80"} />
<div>

As you can see, it works, but it's not the best way to do it since it's not on your server nor in your folders.

2. The src folder.

So what's a better way to add an image to your app?

Download the image and add it in your src folder. Now you can import it in your App component.

import RedRose from './red-rose.jpg'

Now, you can use it inside your code like so:

<img src={RedRose} />

This is better since Webpack will optimize it under the hood.

You can also use it in your css, which is good as well. For instance:

h1 {
    background: url('./red-rose.jpg')
    height: 900px;
}

3. The public folder.

But why and when do we need to put it into the public folder?

There are two cases:

You can use it in the index.html file, but you need to add "%PUBLIC_URL%/" before the name of your image so that when your app is built, it'll change from that code to the URL of your real website:

<img src="%PUBLIC_URL%/red-rose.jgp" />

if you want to do a dynamic reference, for a slider for example.

For instance, if you have a lot of different roses and your image is now called red-rose10.jpg.

Now, in your component, you can remove the import and just reference your image like so:

function App(){
    return (
        <div classname="App">
            <h1>Images React</h1>
            <img src={"/red-rose10.jpg"} />
        </div>
    )
}

For the same reason as you need to add the "%PUBLIC_URL%/" when you reference an image inside the index.html file, you need to add something to your source code here:

<img src={process.env.PUBLIC_URL + "/red-rose10.jpg"} />

Now if you have an index for instance, you can modify the source code again in order to be able to use the different images of your roses:

function App(){

    const index = 10;

    return (
        <div classname="App">
              <h1>Images React</h1>
          <img src={process.env.PUBLIC_URL + `/red-rose${index}.jpg`} />
        </div>
    )
}

This is now a dynamic path!

Usually you'll even create an "images" folder in your public folder to put all of your ressources in the same spot.

So this is the best way of doing things if you're working in a full front-end environment.

4. How does it work with svg files?

Download an svg image. There are two ways to use an svg file :

one as a source

one as a component

Import your svg as a source:

import Piano from './piano.svg'

function App(){

    return (
        <div classname="App">
            <h1>Images React</h1>
            <img src={Piano} />
        </div>
    )
}

Or as a component:

import {ReactComponent as PianoComponent} from './piano.svg'

function App(){

    return (
        <div classname="App">
            <h1>Images React</h1>
            <PianoComponent />
        </div>
    )
}