You may have to use images for user profile, banner, slider, thumbnail & gallery in your web application. So, You must learn how to display images in react js step by step.
There are many ways to display images on the web page using React App. But Here you will know the best way that will be easy to implement in your project.
In react app, first of all, images are kept in the public or src folder then import into the component or HTML file to render/show on the front-end of the website. So, I have explained all these things one by one from the next step.
You can put images in either the public folder or the src folder it depends on ion your project requirement. but I will tell you some points about when to use the public folder and when to use the src folder for showing images.
Learn also –
How to use bootstrap in react js
Images inside Public Folder
If you place images inside the public folder, Those will not be processed by the webpack. This means that When you build your app for production then the public folder will be copied & pasted into the build folder as it is.
You will have to use a special variable PUBLIC_URL to reference images of the public folder.
Example –
By default, favicon.ico is placed in the public folder and it is accessed in index.html files like
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
if you put an image example.jpg inside the public folder then
Important Points –
You should keep these pints in your mind if you put images in a public folder –
- Images can not be minified & post-processed when you build an app for production
- You will not get any errors for missing images at the time of compilation. So, After building an app, the user will get a 404 error
- Images name will not include content hashes.
When to put images inside Public Folder
You should put images inside the public folder if you –
- need to use images with a specific name in the build output. for example – you get the default logo logo192.png
- need to reference paths of a lot of images dynamically
How to reference Image path from the public folder
If you put an image named mypic.jpg directly inside the public folder, then you can reference its path like
File Name – index.html
<img src="%PUBLIC_URL%/mypic.jpg" />
File Name – App.js
<img src={process.env.PUBLIC_URL+"mypic.jpg"} />If you create a folder names images and put an image named mypic.jpg into it, then you can reference its path like
File Name – index.html
<img src="%PUBLIC_URL%/images/mypic.jpg" />
File Name – App.js
<img src={process.env.PUBLIC_URL+"images/mypic.jpg"} />Images inside src Folder
If you put images inside the src folder and those will be processed by the webpack. This means that when you build your app for production, then images will be bundles & minified.
Important Points –
You should keep these pints in your mind if you put images in the src folder –
- Images are imported using the import keyword like css code
- Images will be minified & bundled when you build your app using the build command
- You will definately get errors for missing images at the time of compilation
- Images name will include content hashes
How to reference Image path from the public folder
If you put an image named mypic.jpg directly inside the src folder, then you can reference its path like
File Name – App.js
import pic from ".mypic.jpg";
function App(){
return <img src={pic} />
}If you create a folder names images and put an image named mypic.jpg into it, then you can reference its path like
import pic from "./images/mypic.jpg";
function App(){
return <img src={pic} />
}Steps to Display Images using React App
Now, you will learn to display images by placing them inside the src folder. once you learn it, then you can easily implement it for images of the public folder.
1. Create React App
First of all, you have to create react app using npm for displaying images on the web page
2. Create required folders & files
Then you should create a folder named images inside the public folder and an image component named Webimage.js
3. Put an Image inside src folder
Put an image named mypic.jpg into images folder that is created inside the src folder.
4. Import Image and reference its path
Now, import image from the src folder and reference its path within the src attribute of an img tag
File Name – Webimage.js
import pic from ".images/mypic.jpg";
function Webimage(){
return <img src={pic} />
}
export default WebImage5. Render Image to front-end
to render the image to front-end, you should include the Webimage component file in the App.js file
File Name – App.js
import React from "react"
import Webimage from "./WebImage"
function App() {
return <Webimage />
}
export default App;Make sure App.js must be inculed in the index.js file
File Name – index.js
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App /> ,
document.getElementById('root')
);
6. Run App to display Images
To run the app, you will have to start the development server by running the command npm start in your terminal then see the images on the front-end through this url
http://localhost:3000/