Skip to content

Latest commit

 

History

History
45 lines (31 loc) · 1.61 KB

local-image-used-wrongly.mdx

File metadata and controls

45 lines (31 loc) · 1.61 KB
title i18nReady githubURL
Local images must be imported.
true

import DontEditWarning from '~/components/DontEditWarning.astro'

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?

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: