How to Add and Display Image in ReactJS?

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.

import logo from './logo.svg';

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.

<img src={logo} alt="Brand Logo" />

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.

import React from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, NavLink } from 'reactstrap';

function Header() {
    return (
        <div>
            <Navbar color="light" expand="md" light>
                
                <NavbarBrand href="/">
                    <img src={logo} alt="Brand Logo" />
                </NavbarBrand>

                <NavbarToggler/>

                <Collapse navbar>

                    <Nav className="me-auto" navbar>

                        <NavItem>
                            <NavLink href="/">
                                Home
                            </NavLink>
                        </NavItem>

                        <NavItem>
                            <NavLink href="/contact-us/">
                                Contact Us
                            </NavLink>
                        </NavItem>

                        <NavItem>
                            <NavLink href="/about-us/">
                                About Us
                            </NavLink>
                        </NavItem>
                
                    </Nav>

                </Collapse>

            </Navbar>
        </div>
    );
}

export default Header;

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.

See Also: How to Conditionally Add Props to React Components?

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.

index.html File

<img src="%PUBLIC_URL%/logo.png" />

If you want to access in react components inside the src folder then you have to give the image path like the following.

Header.js Component

<img src={process.env.PUBLIC_URL+"logo.png"} />

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.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, NavLink } from 'reactstrap';

function Header() {
    return (
        <div>
            <Navbar color="light" expand="md" light>
                
                <NavbarBrand href="/">
                    <img src={process.env.PUBLIC_URL+"logo.png"} alt="Brand Logo" />
                </NavbarBrand>

                <NavbarToggler/>

                <Collapse navbar>

                    <Nav className="me-auto" navbar>

                        <NavItem>
                            <NavLink href="/">
                                Home
                            </NavLink>
                        </NavItem>

                        <NavItem>
                            <NavLink href="/contact-us/">
                                Contact Us
                            </NavLink>
                        </NavItem>

                        <NavItem>
                            <NavLink href="/about-us/">
                                About Us
                            </NavLink>
                        </NavItem>
                
                    </Nav>

                </Collapse>

            </Navbar>
        </div>
    );
}

export default Header;

Note: If you have further folders inside the public folder then just give the correct path which refers to the image.

Conclusion

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.

See Also: React Date Range Picker Component Using react-datepicker