Hello my gorgeous friends on the internet 👋, in this article, you will learn how to import images in a react application.

Images make our website more beautiful and displaying them in a react application is also pretty simple to implement with the HTML image element.

Table of Contents

1. What is an image?

2. Adding Image in React.

3. Examples

4. Conclusions

5. Resources

What is an image?

According to Google, an image is a representation of an external form of a person or thing in art, images can be a picture of a person for a portfolio website, a product, a city, or a cat picture.

Images are generally imported or displayed on a website through the <img /> tag, it is a self-closing tag which means it doesn't require a closing tag like the paragraph tags <p>...</p>.

The <img /> tag has two important attributes, the SOURCE attribute and the ALTERNATIVE attribute, and they are applied as shown below.

<img src="source_of_image" alt="display_if_image_is_broken">

The src="" is an attribute that takes in the path to the image while the alt="" attribute is the alternative information to be displayed when the image is broken or cannot be loaded to the browser, the alternative text also comes handy in accessibility feature for screen readers.

These two attributes are required for best practices

Examples

In this section I will show you how to import the image file in your react application, there are two ways to achieve this, the first is through the import method and the other is through the require method.

The Import Method

The import method is part of the JavaScript ES6 features, a method of importing resources such as audio files, images, and CSS in JavaScript, you can read more about it from here.

The code below demonstrates how to import an audio file using the import method.

Displaying images using the import method.

import catImage from "./path-to-images/white-cat.jpg";

class ImageCard extends React.Component {
  render() {
    return (
      <React.Fragment>
      <h1>Image Title</h1>
      <img src={catImage} alt="A white cat" />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<ImageCard />, document.getElementById('root'));

The cat image is imported using the ES6 method and it is passed into the src="" attribute of the <img/> tag

import catImage from "./path-to-images/white-cat.jpg";

Output

---

The Require Method

Another method of importing resources in JavaScript is through the require() method, the require is a JavaScript file and module loader which can be used in adding resources such as an image file as demonstrated below.

Displaying images using the require() method.

class ImageCard extends React.Component {
  render() {
    return (
      <React.Fragment>
      <h1>Image Title</h1>
      <img src={require("./path-to-images/white-cat.jpg").default} alt="A white cat" />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<ImageCard />, document.getElementById('root'));

In the case of the require() method, the audio file is imported directly in the src attribute of the <img /> HTML tag through the require() method.

Try it yourself result

Conclusions

I hope this article has successfully taught you one or two things, below are a few tips to keep in mind when working with images in react application.

1. You must add the .default to the require() method to return the actual path of the image.

2. React will throw a warning if the alternative image attribute alt="" is empty or includes the word image.

Resources

I have attached a link to a useful resource to help you study more on images.

1. HTML Images

---

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed it and found the content useful, then you shouldn't miss the next one, you can subscribe to my newsletter to get notified of my upcoming contents and articles.

You can subscribe to my newsletter here

I will also like to connect with you, let's connect on:

• Twitter Bird @unclebigbay143
• LinkedIn @unclebigbay

---

---

Wishing you a productive day ahead. Bye Bye 🙋‍♂️

If you found my content helpful and would want to support my blog, you can support me by buying me a coffee below, my blog lives on coffee 😂.