How to Add Image In React JS

Adding images in React.js is a common task encountered during development. Fortunately, React provides multiple avenues to accomplish this task effectively. Whether you import images directly into your JavaScript files or retrieve them from an external network, React offers diverse methods for managing and displaying images. A thorough understanding of these techniques is essential for creating visually appealing applications. This article explores different approaches to importing images in React, encompassing the usage of import and require keywords, importing SVGs as React image components, and loading React images from external sources.

How to Add Image in React JS

Including a React JS image in HTML is straightforward. You can use the following code:

img src="path-to-image.jpg" alt="Description of Image"

import React from ‘react’;

// Telling the webpack that this image is used by the Js file

import logo from './react js png';

console.log(logo);
function Header() {
// the URL of your image is the import result

return <img src={logo} alt="Logo" />;
}
export default Header;

In React applications, the inclusion of React PNG images requires different approaches. Here are four ways to how to add images in react:

• Use the import keyword
• Use the ‘require’ keyword
• Import SVGs directly as a React component
• Load images directly from the network

Use the Required Keyword

You can import a file directly in a JavaScript module by giving the source link through img src in react js. This tells webpack to include that file in the bundle. Your code will look like this:

function App() {
return <img src={require('./path-to-image.jpg')} alt="Description of Image" />;
}export default App;

Example: 

Place the React JS images file in your `src` directory (e.g., `src/images/my-image.jpg`).

Import the image in your component:

import React from 'react';
import myImage from './images/my-image.jpg';
function App() {return <img src={myImage} alt="Description of Image" />;}
export default App;

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

Use the Required Keyword

You can also use the `require` keyword to load images into your component. Your code should look like this:

function App() {
return <img src={require('./path-to-image.jpg')} alt="Description of Image" />;
}
export default App;

Example:

Place the image file in your `src` directory (e.g., `src/images/my-image.jpg`).

Use `require` in your component:

import React from 'react';
function App() {
return <img src={require('./images/my-image.jpg')} alt="Description of Image" />;
}
export default App;

`require` can also be used to include audio, video, or document files in your project. Common types are .mp3, .wav, .mp4, .mov, .html, and .pdf.

Import SVGs Directly as a React Component

You can import SVGs directly as React components. In your code, it would look like this:

import { ReactComponent as MyIcon } from './icon.svg';
function App() {return <MyIcon/>;
}
export default App;

Example:

Place the SVG file in your `src` directory (e.g., `src/icons/my-icon.svg`).

Import the SVG as a React component:

import React from 'react';
import {ReactComponent as MyIcon} from'./icons/my-icon.svg';
function App() {return<MyIcon/>;
}
export default App;

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 the Create React App that you want a React component that renders an SVG rather than its filename.

This feature is available with `react-scripts@2.0.0` and higher, as well as `react@16.3.0` and higher.

Load Images Directly From the Network

If you are loading images from the network, it’s a straightforward approach. Your code will look like this:

function App() {
return <img src="https://example.com/path-to-image.jpg" alt="Description of Image"/>;
}
export default App;

Example:

function App() {
  return <img src="https://example.com/path-to-image.jpg" alt="Description of Image"/>;
}
export default App;

These are the different methods to include images in your React applications.

Most Used Styling Properties For Your Image in React JS

Styling images in React.js is essential for creating visually appealing and functional web applications. Key properties include setting dimensions with width and height, creating rounded corners with border-radius, and applying visual effects using the filter property. You can control image transparency with opacity and align images vertically using vertical-align. Additionally, setting images as backgrounds involves properties like backgroundImage, backgroundRepeat, backgroundSize, and backgroundPosition. These properties help you customize the look and behavior of images directly within your React components. Let’s explore some of the most commonly used styling properties for images in React.js:

• Width and/or height

You can set the dimensions of an image using the `width` and `height` properties. For example:

 Example:

import React from 'react';
function App() {
  return <img src="your-image-url.jpg" alt="Your Image" style={{ width: '200px', height: '150px' }} />;
}
export default App;

• Border-radius 

To create rounded corners for an image, use the `borderRadius` property. You can specify a value in pixels or percentages:

   Example:

import React from 'react';
function App() {
  return<img src="your-image-url.jpg" alt="Your Image" style={{ borderRadius: '10px' }}/>;
}
export default App;

• Filter

Apply visual effects to an image using the `filter` property. You can adjust brightness, contrast, grayscale, and more:

    Example:

import React from 'react';
function App() {
  return<img src="your-image-url.jpg" alt="Your Image" style={{filter: 'brightness(1.2) contrast(0.8)'}} />;
}
export default App;

• Opacity

Control the transparency of an image with the `opacity` property. A value between 0 (completely transparent) and 1 (fully opaque) can be used:

   Example:

import React from 'react';
function App() {
  return <img src="your-image-url.jpg" alt="Your Image" style={{ opacity: 0.8 }} />;
}
export default App;

export default App; [/javascript]

• Vertical-align

Align an image vertically within its container using the `verticalAlign` property:

  Example:

import React from 'react';
function App() {
  return <img src="your-image-url.jpg" alt="Your Image" style={{ verticalAlign: 'middle'}} />;
}
export default App;

• Background-image

If you want to set an image as a background, use the `backgroundImage` property:

   Example:

import React from 'react';
function App() {
  return(
    <div style={{ backgroundImage: 'url(your-image-url.jpg)', backgroundSize: 'cover'}}>
      {/* Other content */}
    </div>
  );
}

• Background-repeat

Control how the background image repeats using the `backgroundRepeat` property:

Example:

import React from 'react';
function App() {
  return (
    <div style={{ backgroundImage: 'url(your-image-url.jpg)', backgroundRepeat: 'no-repeat' }}>
      {/* Other content */}
    </div>
  );
}

• Background-size

Adjust the size of the background image with the `backgroundSize` property:

Example:

import React from 'react';
function App() {
  return(
    <div style={{ backgroundImage: 'url(your-image-url.jpg)', backgroundSize: 'contain'}}>
      {/* Other content*/}
    </div>
  );
}
export default App;

• Background-position

Specify the position of the background image using the `backgroundPosition` property:

 Example:

import React from'react';
function App(){
  return (
    <div style={{ backgroundImage: 'url(your-image-url.jpg)', backgroundPosition: 'center'}}>
      {/* Other content */}
    </div>
  );
}
export default App;

Remember to replace `”your-image-url.jpg”` with the actual URL of your image. These properties can be applied directly to an `<img>` tag or a container element with a background image.

Tips for Using Images in React

• Optimize Images: Ensure your react img images are optimized for the web to improve loading times and performance.
• Alt Attribute: Always provide a descriptive `alt` attribute with img in react for better accessibility and SEO.
• Responsive Images: Use CSS and media queries to make images responsive and adapt to different screen sizes.

By following these methods, you can effectively manage and display images in your React.js applications, enhancing both your projects’ visual appeal and functionality.

Related Post : How to Create Smoking Hot Toast Notifications in ReactJS 

Conclusion

Incorporating images into your React.js applications is an essential skill for any developer. This article has explored various methods to import image in react, and how to use image in react with different style guides, from using the `import` and `require` keywords to loading images from the network and importing SVGs as React components. You can create visually appealing and functional web applications by mastering these techniques. 

By understanding how to insert images into react js and styling properties, you can enhance your React projects, ensuring efficient and effective image management. Whether you’re preparing for an interview with common React Interview Questions & Answers or expanding your knowledge through a React.Js Tutorial, mastering image integration is a valuable step in your React development journey. 

If you want to learn more about React, you can join the React Certification Course