How to use images with React!
Tags: html, css, react, tutorial
Published: 2021-11-27 08:25:01

Hey **fellow creators**,

Let's learn how to use images with React!
 
If you prefer to watch the video **version**, it's right here :

{%youtube Z-kUIGDsDE0%}

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*.

```react
<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.

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

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

```react
<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:

```css
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:

```html
<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:

```react
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:

```html
<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:
```react
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:

```react
import Piano from './piano.svg'

function App(){

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

Or as a component:
```react
import {ReactComponent as PianoComponent} from './piano.svg'

function App(){

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

That means that you can pass it some props for example.

There you go! You now know **how to use images for your React apps**.

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool


*See you soon for more tutorials!*

Enzo.