Sometimes, we want to import image (.svg, .png) in a React component.
In this article, we’ll look at how to import image (.svg, .png) in a React component.
How to import image (.svg, .png) in a React component?
To import image (.svg, .png) in a React component, we can import the image directly.
For instance, we write
import React from "react";
import image from "./img1.png";
import "./helloWorld.scss";
const HelloWorld = () => (
<>
<img src={image} alt="some image" />
</>
);
export default HelloWorld;
to add the img element into the HelloWorld component.
We set its src prop to the image that we import with the import statement.
We can import it with import since the Webpack file loader plugin is included with Create React app projects.
Conclusion
To import image (.svg, .png) in a React component, we can import the image directly.
