Different Ways to Display Images in React.js Apps

If you want to include an image in HTML, it’s pretty straightforward. You’d enter code like this:

<img src="./house.jpg" height="200" width="200"/>

But including images in a React JavaScript application requires a slightly different approach. 

In this article, I will explain different ways of including images in React applications.

How to Use the Import Keyword in React to Load Images

You can import a file right in a JavaScript module. This tells a webpack to include that file in the bundle. Your code will look like this:

// House.js
import React from 'react';
import house from './house.jpg';

function House() {
  console.log(house);
  return (
    <div className="App">
      <img src={house} alt="House image" height={200} width={200} />
    </div>
    );
}

export default House;

This ensures that when the project is built, webpack will move the images into the build folder and provide you with correct paths.

More on JavaScript8 Common JavaScript Data Structure

How to Use the Require Keyword in React to Load Images

We can also use the require keyword to load the images into your component. When you do that, your code should look like this:

// House.js
import React from 'react';

function House() {
  return (
    <div className="App">
      <img src={require('./house.jpg')} alt="House image" />
    </div>
    );
}

export default House;

require can also be used for including audio, video or document files in your project. The most common types are .mp3, .wav, .mp4, .mov, .html and .pdf.

How to Add SVG Files to React

One way to add scalable vector graphic (SVG) files is described above, but you can also import SVGs directly as React components. In your code, it would look like this:

// House.js
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

function House() {
  return (
    <div className="House">
      <Logo />
    </div>
    );
}
export default House;

This is handy if you don’t want to load the SVG as a separate file. Don’t forget the curly braces in the import. The ReactComponent import name is significant and tells Create React App that you want a React component that renders an SVG rather than its filename.

This feature is available with [email protected] and higher as well as [email protected] and higher.

More on JavaScript3 Ways to Use Array Slice in JavaScript

How to Add Network Images to React

If you are loading images from the network, then it’s a pretty straightforward approach. In your code, it would look like this:

// House.js
import React from 'react';

function House() {
  return (
    <div className="App">
      <img src="https://miro.medium.com/max/5472/0*xy7oP0ChkXHI9SPSQ" />

      <img src={'https://miro.medium.com/max/5472/0*xy7oP0ChkXHI9SPSQ'} />
    </div>
  );
}

export default House;

These are the different ways to include images in your React application.

Frequently Asked Questions