How to add images in JSX?

In this article, we will learn how to use images in our React application. Generally, we provide the path of the image where it is stored in the src property of our image tag. In react, we implement it similarly but the way of providing the path of the image is a bit different.

In this article, it is assumed to have basic knowledge of JSX and React. We will learn all other things in this article. In this article, we will create a simple demo in an online react playground Stackblitz that provides us a similar environment as VS Code for developing programs and saves the time required for basic setup. We can install all the dependencies that we need to in Stackblitz.

You can fork the project I have created from this link and play around with it. Demo

This would be the first screen that we will see when we create a new project.

Let’s dive in to create new files, install the dependencies and play around with the code.

Let’s have a look at the piece of that in which we need to add our image.

import React from "react"; 
import "./style.css"; 

export default function App() { 
  return ( 
    <div> 
      <h1>Let's React</h1> 
      <div> 
        <img alt="Person's image" /> 
        <span> 
          <b>Name</b>
        </span> 
        <br /> 
        <span>Comment</span> 
      </div> 
    </div> 
  ); 
}

The result of this code we would see would be something as shown below:

Generally, when working with react application when we want to use the images in our project, we add the images that we would require in the “Public” folder and then import the images from the public folder to be displayed where ever needed.

Another way for implementing images in react application is getting the images from the API or using some of the packages that can help us select random pictures for our small projects. In this project, we will use a library known as “faker” that helps us create a project without having to worry about the data. We try to get some data from the faker package, but for that, we need to install that package in our project.

As we are working in an online playground, we don’t need to run the commands for installing any dependencies. To install any dependency in stackblitz expand the “Dependencies” section, enter the name of the package that you want to install “faker” in our case, and hit enter.

Once we hit enter the installation of the package will start and as it is installed, we would be able to see the name of the package in the list of dependencies that are installed.

If you are not using the online playground for your project, you can install the faker package by running this command

npm i --save faker

This command will add a dependency in the project.

To find more details about Faker please visit this GitHub link

Adding source of the image

In HTML of providing the source of the image is something like writing the path of the image in double inverted commas. Whereas this won’t work when writing code in JSX. As we don’t have a hardcoded path of the image, we won’t be able to provide the path in the form of a URL.

To provide the path of an image in JSX we would use interpolation so that we can refer to some variables or some other function that has the value. In the demo, we will try to fetch the image of some random people and display a random name beside it.

import React from "react"; 
import "./style.css"; 
import faker from "faker"; 

export default function App() { 
  return ( 
    <div> 
      <h1>Let's React</h1> 
      <div> 
        <img 
          alt="Person's image" 
          src={faker.image.people()} 
          style={{ height: "70px", paddingRight: "10px" }} 
        /> 
        <span> 
          <b>{faker.name.firstName() + " " + faker.name.lastName()}</b> 
        </span> 
        <br /> 
        <span>{faker.lorem.sentences()}</span> 
      </div> 
    </div> 
  ); 
} 

The result of the file would be the something as seen below.

Let’s understand the meaning of code and its implementation.

As we have used only one component that is App in our project for simplicity, all the code that is used for displaying the image, name, and a paragraph.

We have used the faker package for getting some random images by providing the source as “faker.image.people()”.

To fetch some random names from the faker API. To fetch the name, we have used the combination of first name and last name.

{faker.name.firstName() + ” ” + faker.name.lastName()} helps us to render the full name that we see besides the image.

To display a random paragraph we fetch a random sentence from the faker using “faker.lorem.sentences()“

Summary

After reading this article and performing the steps as implemented in the article you will successfully be able to implement images in react application.