How To Import And Use An Image In A React Component

Posted on by Robert Charles
Import and use an Image in a React component

With Webpack, it is easy to import and use an image in a React component. This article will guide you through the task with examples.

Import and use an image in a React component with webpack

Thanks to the static module bundler: Webpack, you can use the import statement right in a module to add a file, such as an image. It can include static assets like fonts and images in a similar manner to CSS.

If you create a React project with create-react-app, webpack is already enabled. The import statement tells which files webpack should include in the bundle.

It returns a string value, which can be used to refer to your asset in your code. For example, if it is an image, you can assign it to the src attribute. For a link to a PDF file, add it to the href attribute.

Here is a simple example of two text-only React components:

import React from 'react';
import './box.css'; 

function Tutorial(props) {
    return (
        <div className="box info">
            <div className="content">
              	<h2>{props.tutorial}</h2>
            </div>
        </div>
    );
}

function App() {
    return (
        <div>
            <Welcome name="LearnShareIT" />
            <Tutorial tutorial="Tutorial #44: Add Images To Components" />
        </div>
    );
}

export default App;

Output

To add an image to the Tutorial component, firstly, you have to import that image. It can be on your local file system or another server:

import ReactLogo from './react-logo.png';

Then an <img> tag should be added to the component containing the image. Use the returned string from import as the source of your image, e.g., add it to the src attribute. Remember that you can use other attributes of a typical <img> element, such as alt:

function Tutorial(props) {
    return (
        <div className="box info">
            <div className="content">
                <h2>{props.tutorial}</h2>
                <p>
                  	<img src={ReactLogo} alt="This is the logo of ReactJS" />
              	</p>
            </div>
        </div>
    );
}

This is the result:

SVG files are supported as well:

import ReactLogo from './react-logo.svg';

There is another option of including SVG files into a component: Directly import them as React components (Note: You will need react-scripts version 2.0.0 or newer).

import { ReactComponent as ReactLogo } from './react-logo.svg';

You can change the path to your image without having to modify the code of your component as long as the returned string is the same. Webpack will find and resolve all references in your code.

If an invalid path is used (Such as when there is a typo or your file has been deleted) as below:

import ReactLogo from './non-existent.png';

Then, webpack will leave a compilation error, the error message would look just like when a non-existent JavaScript module is included:

Failed to compile.
Module not found: Error: Can't resolve './non-existent.png' in '/home/learnshareit/react/src'
ERROR in ./src/App.js 6:0-44
Module not found: Error: Can't resolve './non-existent.png' in '/home/learnshareit/react/src'
webpack compiled with 1 error

Remember that if the size of your image is less than 10,000 bytes, the import statement will return a data URL instead of a path.

Formerly known as a data URI, it is a string starting with "data:". Data URLs allow web developers to embed small files into their websites without using external assets.

In create-react-app project, this rule applies to most image file extensions (png, jpeg, jpg, gif, and bmp), except for svg, due to a bug. You can change the 10,000-byte threshold by editing the IMAGE_INLINE_SIZE_LIMIT variable in your create-react-app project’s configurations.

Summary

You can use the module bundler Webpack to import and use an image in a React component. You only need to add it with a normal <img> tag. Webpack will read the path of your file and add it to the final bundle. Thank you for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *