Using the image tag in React
source link: https://daveceddia.com/react-image-tag/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
import companyLogo from './path/to/logo.jpg';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:
function Home() {
return (
<div>
<img src={companyLogo} alt="BigCo Inc. logo"/>
</div>
);
}Note I’m using src={companyLogo} and not src="companyLogo"! If you use the quoted string "companyLogo" it will try to fetch a file at /companyLogo and that will fail. Make sure to use curly braces if you’re using an imported image. Curly braces are the way to pass JS variables as props.
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:
function Home() {
return (
<div>
<img src="images/logo.jpg" alt="BigCo Inc. logo"/>
</div>
);
}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 imports 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={yourName}/> with <img src="a5c8d3f89cad.jpg"/>.
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).
Want to get better at React?
I send an article every Wednesday to help you level up as a front-end React developer. Drop your email in the box if you'd like to get on the list.
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.
Absolutely Loved it Dave! Great Help.
Hi, can you tell me what theme are you using for code blocks? I see that you use shiki but I can't find your theme anywhere. Thanks
I don't know anything about Android or its permission model though.
Do you have any suggestions for using the image tag to load images that are dynamically being added to say, an Android smartphone's internal storage? If I'm not mistaken, it looks like both examples here are using images that already exist; I'm looking to load images that do not yet exist on the device/server/local disk. Thank you in advance, this is another excellent tutorial!
If you can get a path to them, you should be able to load them. I don't know anything about Android or its permission model though. This also seems like more of a React Native question - RN might have special ways to read files from the device, I'm not sure.
RN and Android capabilities are a great starting point to continue researching. Providing a path to where the images end up makes sense now - thank you, Dave!
How can we load an image which are on CDN?
I tried like
<img src={pathToCDN} alt="" />
It gets render on client side(browser) but didn't get render by server(). I check doc preview (chrome devtool) it's showing blank space.
Sounds like there's something else going on, maybe that variable isn't getting set during the server-side render. Whether the image is on a CDN shouldn't matter, you just need a URL to it.
Thank you so much for making this post. I might land an internship tomorrow. Thanks for your help.
Great information! Thanks Dave!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK