Local images must be imported.

LocalImageUsedWrongly: Image’s and getImage’s src parameter must be an imported image or an URL, it cannot be a string filepath. Received IMAGE_FILE_PATH.

What went wrong?

Section titled What went wrong?

When using the default image services, Image’s and getImage’s src parameter must be either an imported image or an URL, it cannot be a string of a filepath.

For local images from content collections, you can use the image() schema helper to resolve the images.

---
import { Image } from "astro:assets";
import myImage from "../my_image.png";
---


<!-- GOOD: `src` is the full imported image. -->
<Image src={myImage} alt="Cool image" />


<!-- GOOD: `src` is a URL. -->
<Image src="https://example.com/my_image.png" alt="Cool image" />


<!-- BAD: `src` is an image's `src` path instead of the full image object. -->
<Image src={myImage.src} alt="Cool image" />


<!-- BAD: `src` is a string filepath. -->
<Image src="../my_image.png" alt="Cool image" />

See Also: