Guide to ReactJS Image

In ReactJs, we can use static assets like images which are similar to CSS with webpack. In a JavaScript module, a file right can be imported. This tells webpack to include that file in the bundle Unlike the imports in CSS, a string value is given when a file is imported. This value can be referenced in the code as the final path, such as the attributes we use for different purposes like the href attribute of a link to open any site or PDF,  the src attribute of any image, etc. Instead of a path, a data URL is returned by those imported images which are less than ten thousand bytes. This applies to the following extensions: bmp, gif, jpeg, png, and jpg.

By setting the IMAGE_INLINE_SIZE_LIMIT environment variable as it is mentioned in the document of advanced configuration, the threshold of ten thousand bytes can be controlled by us.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

With the help of an example code implementation, we will see how the images directly move into the build folder by the webpack when the project is built and how we are provided with the correct path details.

Example:

import React from 'react';

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

import logo from './logo.png';

console.log(logo);

function Header() {

  //  the URL of your image is the import result

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

}

export default Header;

Output:

Even in CSS, we can make it work as shown below:

.Logo {

    background-image: url(./logo.png);

  }

All the relative module references which start with ./ in CSS are found by the webpack. With the final path of the compiled bundle, they are replaced. You will see a compilation error when an important file gets deleted accidentally, or a typo is made like when a non-existent JavaScript is imported. From the content hashes the webpack generates the final filenames in the compiled bundle.

In production, the webpack will give a different name if the file content changes in the future.

Become a Certified UI UX Expert in Just 5 Months!

With The Best-in-class UI UX ProgramExplore Program

Now let us discuss an alternative way of handling static assets.