[Solved] You wrote this Remix code but the image does not appear:import { Image } from '@remix-run/react';... }What is the error and how to fix it? | Remix

Remix - Performance

You wrote this Remix code but the image does not appear:

import { Image } from '@remix-run/react';

export default function Logo() {
  return <Image source='/logo.svg' alt='Logo' />;
}

What is the error and how to fix it?

AThe alt attribute is missing; add alt text for accessibility.

BThe import statement is wrong; use default import instead.

CThe prop 'source' is incorrect; change it to 'src'.

DThe Image component must be wrapped in a div to render.

Step-by-Step Solution

Solution:

Step 1: Identify incorrect prop name
The Image component expects src, not source.
Step 2: Correct the prop to fix image loading
Change source='/logo.svg' to src='/logo.svg' to display the image.
Final Answer:
The prop 'source' is incorrect; change it to 'src'. -> Option C
Quick Check:
Use 'src' prop for image source [OK]

Quick Trick: Use 'src' prop, not 'source', for images [OK]

Common Mistakes:

MISTAKES

Master "Performance" in Remix

9 interactive learning modes - each teaches the same concept differently

More Remix Quizzes

You wrote this Remix code but the image does not appear: