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.
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.
Now let us discuss an alternative way of handling static assets.
Adding SVGs
In the above example, we learned about one of the two approaches to add SVG files. SVGs can also be imported by us directly as React components. We can select either of the two approaches and proceed.
If we do not want our SVG to load in a separate file, follow the below method.
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* An actual react component is React and we are using hat */}
<Logo />
</div>
);
}
The ReactComponent import name is significant. It tells Create React App that you want a React component that renders an SVG rather than its filename. A title prop, along with the other props that the SVG elements accept, are accepted by the imported SVG React component. To use an accessible title to our React component, this title must be used.
Output:
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
This article discusses the images of ReactJs and how it maintains their importance.
To learn such concepts, you can opt for our Full-Stack Web Development Certification Course and master both the frontend and backend with the different types of technologies and tools like AngularMVC and SpringBoot, etc., and improve your career prospects.
Besides pursuing varied courses provided by Simplilearn, you can also sign up on our SkillUp platform. This platform, a Simplilearn initiative, offers numerous free online courses to help with the basics of multiple programming languages, including ReactJS images. The course offered under this program will help you become an expert in different domains of your choice, such as Machine Learning, Artificial Intelligence, business analytics, etc.