React Image src

1. Reference a Local Image in React Using the create-react-app Package
2. Load an Image Using the import Statement in React
3. Load an Image Using the require() Method in React
4. How import and require() Work in React

If you’re new to React, you have probably noticed that React uses HTML-like syntax called JSX. This syntax provides a simple way to write React applications. When it comes to including images in the app, things get a little muddy. Unlike HTML, React code goes through many changes before being shown to the users.

When switching from development to production mode, the relative location of images might change. You need a reliable way to import and include images in your React components.

Reference a Local Image in React Using the create-react-app Package

When developing a React application, you can easily include an image as long as your development environment includes webpack. When using the create-react-app package, webpack is automatically included.

The element tag in JSX works the same way as in HTML - it is a self-closing img tag. Developers can use the src attribute to specify the path. In this example, the <img/> element uses hard-coded image URL as a source:

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

If you want to specify a relative path to image location within the folder, things get a little more complicated. Providing a source for an image is not as simple as setting the src attribute equal to a relative file path on the computer. First of all, sandboxed browsers can not access your computer’s src relative file path. You especially can’t rely on local pathname once the application is deployed. Instead, developers must use either import or require() statements to load the image.

When developing a create-react-app project, it is a good practice to have an assets folder to store all your images. Usually, this folder is created in the src folder of your project. Assuming that you follow this convention for storing the images, let’s look at how you’d import and use images as a value for the src attribute.

Load an Image Using the import Statement in React

You can also use import statement to load an image. It looks straightforward and accomplishes the same goal as hard-coded url:

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

As long as you provide a valid path, your create-react-app should display an image.

In this case, the path works because both testComponent and assets folders are located in the src folder. The ending of the path - cat.jpg is just a name of the individual file.

import statement provides an additional benefit of storing the imported asset in a variable. When setting a value to the src attribute, you can reference the variable name from the import statement.

You can read more about import here.

Load an Image Using the require() Method in React

React developers use the require() method to load various types of modules. It can be used for loading images as well.

If you want to use it within JSX, the require() method must be placed between curly braces. As you may know, the code between curly braces is interpreted as valid JavaScript in JSX.

<img src={require("./assets/cat.jpg").default} />

The require() method takes one argument, a valid relative path to an image. Also, note that you must access the .default property of the returned object in some browsers.

Alternatively, you can create an image variable to store your image, and then reference it in your component. Here’s an example:

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

You can name the variable anything you want. It doesn’t have to be called image.

Remember that if you want to reference a JavaScript variable in React, you must wrap it in curly braces.

There is no difference between the require() method and the import statement regarding performance.

How import and require() Work in React

Some React developers might find it surprising that webpack (and other bundlers) handle image loading, not JavaScript or React.

When you load an image in a component, the bundler internally records the association between the component and the image. Afterward, it will source the asset, copy it, give it a unique name and place it in the accessible directory on the server.