Introduction
When creating net functions with React, we sometimes need to embody visible components to seize the customers’ curiosity. These visible components may very well be any sort of picture, together with JPGs, PNGs, SVGs, GIFs, and lots of others.
On this article, we’ll discover ways to import photographs with React and see the varied methods this may very well be achieved.
Exterior photographs and native photographs are the 2 sorts of photographs we need to use in our React software. We’re primarily involved with native photographs on this article as a result of exterior photographs don’t require us to import them.
Exterior photographs are photographs which have already been hosted externally and may be accessed by anybody through a URL, whereas native photographs are photographs which can be solely out there to us on our native pc or undertaking folder and that we need to use in our software.
Learn how to Show Pictures hosted Externally
Earlier than we get into easy methods to import photographs, it is vital to grasp that photographs hosted elsewhere work the identical approach we have at all times used photographs in HTML – by including the URL to the src attribute of the img tag:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Brand" />
</div>
);
};
Let’s now find out how we are able to import (native) photographs with React!
Learn how to Import Pictures with React
Other than the exterior photographs, the way in which photographs are utilized in React differs considerably from that of different frameworks and even HTML. These photographs should first be imported into React earlier than they can be utilized in our software.
This may be completed in two methods: by utilizing the import assertion or by utilizing the require() perform. We’ll go over each approaches.
Learn how to Import Pictures With React Utilizing the import Assertion
As a result of it’s simpler to learn and perceive, the import assertion is essentially the most generally used methodology for importing regionally saved photographs in React. The pictures are handled as default exports, and once we import them, we achieve this in the identical approach that we import elements. That is carried out by specifying the relative path from the file to the picture we’re importing:
import Brand from './photographs/react-logo.png';
const App = () => {
return (
<div>
<img src={Brand} alt="React Brand" />
</div>
);
};
Within the code above, we nonetheless use the img tag and src attribute, however this time the src attribute receives a variable reasonably than a string, which is handed utilizing curly braces in JSX.
Be aware: We are able to import as many photographs as we might prefer to, however every picture will need to have a novel title within the import assertion, else it’ll throw an error.
It is very important perceive easy methods to specify and acquire relative paths for information; in any other case, bugs and errors could happen. Within the previous instance, the picture was saved in an /src/photographs.
Learn how to Import Pictures With React utilizing the require() Perform
The require() perform is a Node.js perform that’s used to incorporate exterior modules from information apart from the present file. It really works in the identical approach because the import assertion and permits us to incorporate photographs:
let Brand = require('./photographs/react-logo.png');
const App = () => {
return (
<div>
<img src={Brand} alt="React Brand" />
</div>
);
};
The one distinction is the primary line the place we required the picture through its relative path after which saved it in a variable which we accessed within the img tag through curly braces.
We are able to additionally resolve to do that inline and keep away from the additional line used to assign the picture to a variable, as it isn’t obligatory:
const App = () => {
return (
<div>
<img src={require('./photographs/react-logo.png')} alt="React Brand" />
</div>
);
};
Conclusion
We discovered easy methods to import native photographs utilizing the import assertion and the require() perform on this article.
