Using the image tag in React
In React, image tags are a bit weird. This isn’t really React’s fault, but more a problem of where the images will reside on the server after the app is built.
I’m talking about the plain old <img src=""/> tag here. The same one you’d use in HTML.
When you img in a React component, the the src prop needs to be point at something that the server can serve.
Don’t Use a File Path From Your Computer
A common mistake for beginners is to set the src to a file path on their computer, like /Users/yourname/Projects/this-react-app/src/image.png . That won’t work.
Browsers are mostly sandboxed these days and won’t let you access files by their path on disk. If you did get that to work (maybe with file:// ), it’d break as soon as you deployed the app, because a web server won’t have that file in the same place! (And no, the solution is not to put it in the same place on the server 🙂
Two Ways to Include an Image in a React Component
With React, since there’s a build step, you need a way to include the image. There are 2 main ways to do that.
I’m going to assume a Create React App project here, where everything in the public directory gets copied to the server and everything under src is fair game for importing into JS files.
Option 1: import the image into the component
Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you’re using it.
Then you can reference it by that variable name. The name can be anything you want, it doesn’t have to match the image or anything.
Wherever you want to display the image, render your img tag and pass that variable as the src :
Note I’m using src=
Option 2: Put the image in the public directory
You can put the image file in the public folder (or if this is not Create React App… then any folder that will be copied to the server).
Then, assuming your server is treating the public folder as the “root” directory ( / ), then your images will be available relative to that – just like with plain HTML.
So if you had an image at public/images/thing.jpg , you could display that image this way:
Because this method makes the image available as a regular file on the web server, and you can test it by opening http://localhost:3000/images/logo.jpg in the browser (or, you know, your actual domain name, once it’s deployed!)
How Imported Images Work in React
First, know that import s are not handled by React at all – they’re handled by your bundler, which is probably Webpack. (if you’re using Create React App, it is definitely Webpack)
Webpack, Rollup, Parcel, and other bundlers all work conceptually the same way: when you import a static file, like an image or a CSS file, the bundler doesn’t literally paste that file in at the import location. Instead, it makes a note that this particular JS file depends on this particular image/CSS file/whatever.
Then the bundler will copy the image to the output directory with a generated unique name (like a5c8d3f89cad.jpg ) and, behind the scenes, it will replace <img src=
If the image is especially small, Webpack might even decide to inline it into the JS bundle, as an optimization.
This all happens without you having to worry about it.
The Best Way to Use the img tag in React?
For one-off images that are related to the component at hand, I like to import them. Imported images have the side benefit that, if the file is missing, the build will fail, and you’ll find out quick! For that reason, I lean toward importing an image if I’m going to use it.
For generic site-wide images, or where it would be annoying to manually import them, I’ll put them in public. This is especially useful when the React app is only a small slice of your overall site, and the same image should be used by both React and other non-React pages. In this case I’d rather avoid duplicating images (with the potential that the copies get out of sync).
Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them 🙂
For a step-by-step approach, check out my Pure React workshop.
Learn to think in React
- 90+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Developer interviews
Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I’m a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.
Adding Images, Fonts, and Files
With webpack, using static assets like images and fonts works similarly to CSS.
You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153. You can control the 10,000 byte threshold by setting the IMAGE_INLINE_SIZE_LIMIT environment variable as documented in our advanced configuration.
Here is an example:
This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
This works in CSS too:
webpack finds all relative module references in CSS (they start with ./ ) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by webpack from content hashes. If the file content changes in the future, webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
Please be advised that this is also a custom feature of webpack.
It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section.
Adding SVGs
One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The ReactComponent import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename.
Tip: The imported SVG React Component accepts a title prop along with other props that a svg element accepts. Use this prop to add an accessible title to your svg component.
Importing Images With React
When developing web applications with React, we typically want to include visual elements to capture the users' interest. These visual elements could be any type of image, including JPGs, PNGs, SVGs, GIFs, and many others.
In this article, we will learn how to import images with React and see the various ways this could be achieved.
External images and local images are the two types of images we want to use in our React application. We are primarily concerned with local images in this article because external images do not require us to import them.
External images are images that have already been hosted externally and can be accessed by anyone via a URL, whereas local images are images that are only available to us on our local computer or project folder and that we want to use in our application.
How to Display Images hosted Externally
Before we get into how to import images, it's important to understand that images hosted elsewhere work the same way we've always used images in HTML — by adding the URL to the src attribute of the img tag:
Let's now learn how we can import (local) images with React!
How to Import Images with React
Apart from the external images, the way images are used in React differs significantly from that of other frameworks or even HTML. These images must first be imported into React before they can be used in our application.
This can be accomplished in two ways: by using the import statement or by using the require() function. We'll go over both approaches.
How to Import Images With React Using the import Statement
Because it is easier to read and understand, the import statement is the most commonly used method for importing locally stored images in React. The images are treated as default exports, and when we import them, we do so in the same way that we import components. This is done by specifying the relative path from the file to the image we are importing:
In the code above, we still use the img tag and src attribute, but this time the src attribute receives a variable rather than a string, which is passed using curly braces in JSX.
Note: We can import as many images as we'd like to, but each image must have a unique name in the import statement, else it will throw an error.
It is important to understand how to specify and obtain relative paths for files; otherwise, bugs and errors may occur. In the preceding example, the image was saved in an /src/images .
How to Import Images With React using the require() Function
The require() function is a Node.js function that is used to include external modules from files other than the current file. It works in the same way as the import statement and allows us to include images:
The only difference is the first line where we required the image via its relative path and then stored it in a variable which we accessed in the img tag via curly braces.
We can also decide to do this inline and avoid the extra line used to assign the image to a variable, as it's not compulsory:
Conclusion
We learned how to import local images using the import statement and the require() function in this article.
How to Import SVGs in a React and Vite app
Israel Mitolu
Are you having difficulties importing SVGs into your React app? This is a problem that many developers face, especially when setting up a new React app with a module bundler.
In this article, I will share with you the different ways of importing SVGs in React, as well as how the process works under the hood.
Let’s get started.
What Is an SVG?
SVG, short for Scalable Vector Graphic, is an image format used for rendering two-dimensional (2D) graphics on the internet.
The SVG format stores images as vectors which are graphics made up of points, lines, and curves based on geometry and mathematical formulas.
Because they are based on numbers and values rather than a grid of pixels like raster images(.png and.jpg), they do not lose quality when zoomed or resized.
They’re also great for creating responsive websites that need to look good and function well across a variety of screen sizes.
Overall, SVGs are great as they are scalable, lightweight, customizable, and can be animated using CSS when used inline.
How to Import SVGs in React Apps
Let’s go through some of the most used methods when importing SVGs into React Apps.
1. How to Import SVGs Using the Image Tag
Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA (Create React App), you can import the SVG file in the image source attribute, as it supports it off the bat.
But if you are not using CRA, you have to set up a file loader system in the bundler you’re using (Webpack, Parcel, Rollup, and so on).
Webpack, for instance, has a loader for handling SVGs called file-loader.
To install the file-loader, add the following command:
Next, add the loader to the webpack.config.js file:
Now, you can import your SVG files and use them:
NOTE: While this approach is straightforward, it does have one disadvantage: unlike the other methods for importing, you cannot style the SVG imported in a img element. As a result, it will be suitable for an SVG that does not need customization, like logos.
2. How to Import SVGs by Adding them Directly as JSX
JSX supports the svg tag, so we can copy-paste the SVG directly into our React components. This method is straightforward as it helps you take full advantage of SVGs without using a bundler.
The approach is possible because SVGs are in XML format, just like HTML. So, we can convert it to JSX syntax. You can also use a compiler instead of manually converting.
The advantage of including SVGs inline is that we have access to their different properties, which allows us to style and customize them as we see fit.
One thing to keep in mind is that if your SVG file size is large, your code may become complex, reducing readability and productivity. If this is the case, use a png or jpeg file..
3. How to Import SVGs as React Components
If you use CRA, there’s a chance you have imported and used SVGs directly as a React component at one point in time.
This method, which is possible with the help of a file loader, works by loading the image alongside the HTML rather than as a separate file.
4. How to Convert SVGs to React Components
This approach is similar to the one previously mentioned. Here, we can convert an SVG to a React component by returning it from inside a class or functional component.
To do this, open up the SVG file in a text editor, and copy-paste the code into a new component:
Now, you can import and render the SVG component in another component like this:
Again, this approach is only possible if your React app has a loader like SVGR’s Webpack loader included.
5. How to Import SVGs Using SVGR
SVGR is a tool that takes raw SVG files and transforms them into React components. It also has a large ecosystem with support for Create React App, Gatsby, Parcel, Rollup, and other technologies.
So, how do we set it up?
First, install the package by running the code below:
Next, update your webpack.config.js :
Now, you can import an SVG file as a React component:
6. How to Import SVGs Using the Vite Plugin for SVGR
vite-plugin-svgr is a plugin for Vite that uses svgr under the hood to transform SVGs into React components.
You can install it by running the following command:
Next, add the plugin inside your app’s vite.config.js :
Now, you can import the SVG files as React components:
Conclusion
And it’s a wrap! In this article, we’ve covered how to import SVGs in a React App using custom configuration from specific packages, how importing React components works, and how to use them in a Vite setup.
When working with Vite, I use the vite svgr plugin, which works flawlessly. You can also experiment with the other ways discussed in this article.
I hope you found this article insightful. If you do have any questions, feel free to send a message on Twitter or LinkedIn.