How to Display Images from URL in React

Use image URLs in React when the source comes from an API, CMS, database, CDN, or user-uploaded content. This is the most common pattern for avatars, product images, blog covers, and dynamic media feeds.

What you’ll build or solve

You’ll learn how to display images from a URL in React using props, state, and mapped lists. You’ll also know how to handle broken URLs safely.

When this approach works best

This approach is the right choice when the image source is dynamic and not bundled with the app.

Common real-world scenarios include:

• User avatars
• Product galleries
• CMS blog covers
• Social feeds
• Course thumbnails

This is a bad idea when the asset is static and local to the component, where a direct import is cleaner.

Prerequisites

You only need:

• A React component
• A valid image URL
• Basic JSX knowledge

Step-by-step instructions

Step 1: Pass the image URL into src

A dynamic URL works directly in JSX.

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

export default Avatar;

This is the cleanest pattern for reusable components.

Step 2: Use API-loaded URLs from state

A common real-world case is loading the URL from fetched data.

function ProfileCard() {
  const [user, setUser] = useState({
    name: "Alex",
    avatar: "https://cdn.example.com/avatar.jpg"
  });

  return <img src={user.avatar} alt={user.name} />;
}

This works well with fetched CMS or API content.

Step 3: Render image URLs in lists

Map dynamic URLs into image cards.

function Gallery({ images }) {
  return (
    <div>
      {images.map((image) => (
        <img key={image.id} src={image.url} alt={image.title} />
      ))}
    </div>
  );
}

This is perfect for galleries and feeds.

What to look for:

• Dynamic URLs go directly in src
• Great for API and CMS media
• Works naturally in mapped lists
• Always add alt
• Add fallbacks for broken URLs

Examples you can copy

Avatar

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

Product card

<img src={product.imageUrl} alt={product.name} />

Blog cover list

<img src={post.coverUrl} alt={post.title} />

Common mistakes and how to fix them

Mistake 1: Using imports for dynamic URLs

What the reader might do:

Try to import a runtime API URL.

Why it breaks: imports are for build-time local files.

Corrected approach:

Pass the URL string directly to src.

Mistake 2: Missing fallback for broken images

What the reader might do:

Render the URL directly with no backup.

Why it breaks: broken API data creates empty image placeholders.

Corrected approach:

Use onError with a fallback image.

<img
  src={imageUrl}
  onError={(event) => {
    event.target.src = "/fallback.jpg";
  }}
  alt="Fallback"
/>

Mistake 3: Missing stable keys in image lists

What the reader might do:

Use the array index.

Why it breaks: UI updates can become unstable.

Corrected approach:

Use a stable image ID.

Troubleshooting

If the image fails, verify the URL is valid and publicly accessible.

If broken placeholders appear, add an onError fallback.

If list rendering behaves oddly, use stable keys.

If layout shifts happen, define width and height.

Quick recap

• Dynamic image URLs go directly in src
• Great for API and CMS content
• Always add alt
• Use onError fallbacks
• Use stable keys in mapped image lists