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
What is an image?
Adding Image in React.
Examples
Conclusions
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.
You must add the
.default
to the require() method to return the actual path of the image.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.
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:
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 ๐.