Importing Images With React

Introduction

When developing web applications with React, we typically want to include visual elements to capture the users' interest. These visual elements could be any type of image, including JPGs, PNGs, SVGs, GIFs, and many others.

In this article, we will learn how to import images with React and see the various ways this could be achieved.

External images and local images are the two types of images we want to use in our React application. We are primarily concerned with local images in this article because external images do not require us to import them.

External images are images that have already been hosted externally and can be accessed by anyone via a URL, whereas local images are images that are only available to us on our local computer or project folder and that we want to use in our application.

How to Display Images hosted Externally

Before we get into how to import images, it's important to understand that images hosted elsewhere work the same way we've always used images in HTML - by adding the URL to the src attribute of the img tag:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

Let's now learn how we can import (local) images with React!

How to Import Images with React

Apart from the external images, the way images are used in React differs significantly from that of other frameworks or even HTML. These images must first be imported into React before they can be used in our application.

This can be accomplished in two ways: by using the import statement or by using the require() function. We'll go over both approaches.

How to Import Images With React Using the import Statement

Because it is easier to read and understand, the import statement is the most commonly used method for importing locally stored images in React. The images are treated as default exports, and when we import them, we do so in the same way that we import components. This is done by specifying the relative path from the file to the image we are importing:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

In the code above, we still use the img tag and src attribute, but this time the src attribute receives a variable rather than a string, which is passed using curly braces in JSX.

Note: We can import as many images as we'd like to, but each image must have a unique name in the import statement, else it will throw an error.

It is important to understand how to specify and obtain relative paths for files; otherwise, bugs and errors may occur. In the preceding example, the image was saved in an /src/images.

How to Import Images With React using the require() Function

The require() function is a Node.js function that is used to include external modules from files other than the current file. It works in the same way as the import statement and allows us to include images:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

The only difference is the first line where we required the image via its relative path and then stored it in a variable which we accessed in the img tag via curly braces.

We can also decide to do this inline and avoid the extra line used to assign the image to a variable, as it's not compulsory:

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

Conclusion

We learned how to import local images using the import statement and the require() function in this article.