How to Add Images in React

Use images in React when components need logos, product photos, icons, illustrations, or dynamic media content. The cleanest approach depends on whether the image is local, in the public folder, or loaded from a URL.

What you’ll build or solve

You’ll learn how to add images in React using local imports, public assets, and dynamic URLs. You’ll also know when each option is the best fit.

When this approach works best

This approach is the right choice when React components need visual assets rendered in JSX.

Common real-world scenarios include:

• App logos
• Product cards
• Avatar images
• Hero banners
• CMS-driven image URLs

This is a bad idea when decorative icons should instead be SVG components or icon libraries for better styling control.

Prerequisites

You only need:

• A React app
• An image file or URL
• Basic JSX knowledge

Step-by-step instructions

Step 1: Import a local image file

For component-level assets, import the image directly.

import logo from "./assets/logo.png";

function Header() {
  return <img src={logo} alt="Mimo logo" />;
}

export default Header;

This is the most common approach for local bundled assets.

Step 2: Use images from the public folder

For globally accessible files, use the public path.

function Hero() {
  return <img src="/hero-banner.jpg" alt="Hero banner" />;
}

export default Hero;

This works well for large static files that do not need bundler imports.

Step 3: Render dynamic image URLs

When the image comes from an API or CMS, use the URL directly.

function Avatar({ imageUrl }) {
  return <img src={imageUrl} alt="User avatar" />;
}

export default Avatar;

This is ideal for user-generated content and CMS media.

What to look for:

• Use imports for local component assets
• Use /file.jpg for public assets
• Dynamic URLs work directly in JSX
• Always include alt
• Prefer responsive sizing through CSS

Examples you can copy

Local logo

import logo from "./logo.png";

<img src={logo} alt="App logo" />

Public hero

<img src="/hero.jpg" alt="Course hero" />

Dynamic avatar

<img src={user.avatarUrl} alt={user.name} />

Common mistakes and how to fix them

Mistake 1: Using a relative string path for local files

What the reader might do:

<img src="./logo.png" alt="Logo" />

Why it breaks: bundled React apps usually need local asset imports.

Corrected approach:

Import the image first.

Mistake 2: Forgetting alt

What the reader might do:

<img src={logo} />

Why it breaks: accessibility and fallback UX suffer.

Corrected approach:

Always add meaningful alt text.

Mistake 3: Using oversized images without styling

What the reader might do:

Render a huge original image directly.

Why it breaks: layout shifts and slow pages.

Corrected approach:

Set width constraints in CSS or inline styles.

Troubleshooting

If the image does not render, confirm local assets are imported correctly.

If public images fail, verify the file exists in the public root.

If dynamic URLs break, inspect the API response value.

If layout shifts happen, define width and height.

Quick recap

• Import local assets for bundled images
• Use public paths for global static files
• Dynamic URLs work directly in JSX
• Always add alt
• Control sizing to avoid layout shifts