In this tutorial, we will learn how to add an image to the ReactJS application and then display it on the frontend side of the web browser.
To add and display images in ReactJS is slightly different from what you do in the HTML. In the HTML, you give the image path in
<img> tag and it will display on frontend.
But in react you can’t give the image path directly. You have to first import the image from their location and then use that property to display it.
Let’s get started to add and display an image in your reactjs application.
Add and Display Image in ReactJS
To add the image and display the image in reactjs, you need to first import the image from the images directory.
To import the image in react component, just add the following line in your component. Make sure the image path is correct.
Note: Don’t forget to change the image filename with yours and correct the directory path.
You can add any type of image in react js application like svg, png, jpg, jpeg, gif, etc. It’s up to you where and which images are suitable for your react application.
To display that image on the front end, we will use that
logo constant in the
<img> src path attribute. You can also add other image attributes dynamically.
The above image tag you can use in your react js component where you want to display the image on the front.
Let’s take an example of a component to add and show the image on the front.
Add and Display Image Example
We will create a Header component that has a navbar with the brand logo. You can create multiple components to separate each section to manage easily.
In the Header component, we will import the image from the same directory where the component is and then use it in the component to display on the frontend.
Did you see in the above example, first we imported the SVG logo image and then import the bootstrap and reactstrap components to build the
<Header> component and add the image in navbar brand section.
Then in the render function, we used those components to build the navbar and the image constant in the
<img> tag to display the image on the frontend side.
Add and Display Image in ReactJS From Public Folder
If you have your images inside the
public folder then it will not process directly, you can access them directly.
To add the image from the
public folder, you have to use the special variable
PUBLIC_URL. This variable refers to the public folder. So with this variable, you can access the image from the
public folder and display it on the front.
Let’s see how we can access the images from the public folder.
Suppose we have an image file logo.png inside the
public folder and now we will see how we can import and add it to react components.
If you want to access this file in the index.html file which is also inside the
public folder then you will give the path like the following reference.
If you want to access in react components inside the
src folder then you have to give the image path like the following.
Let’s take the same above example of <Header> component to get the path of the images from the
public folder using the
PUBLIC_URL environment variable.
Note: If you have further folders inside the public folder then just give the correct path which refers to the image.
So in this tutorial, you learned about how to add an image in react js application by importing it from their path and then displaying it on the front.
You also learned about how to add images from the public folder using the process.env.PUBLIC_URL and %PUBLIC_URL% environment variable and render them in components to show on frontend.
Hope you like it. Please share it with your network and if you have any queries please ask me in the comment section, I will respond to you as soon as possible.