#Cannot find @fs/... directory on build

7 messages · Page 1 of 1 (latest)

urban loomBOT
#

Hi @worthy raptor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message you are seeing:

Error: ENOENT: no such file or directory, open '/home/azyrite/Projects/OSS/azyrites-rail-gallery/dist/@fs/home/azyrite/Projects/OSS/azyrites-rail-gallery/src/content/photos/_MG_5385.jpg'

suggests that Astro is trying to access an image using a file system path (@fs/...) inside the dist/ build output, which is not correct. This usually happens when local images are referenced incorrectly in your code.

According to the Astro documentation, when using the <Image /> component or getImage, the src parameter must be an imported image or a URL, not a string file path. If you pass a string file path (like "../my_image.png"), Astro cannot resolve it during the build, leading to errors like the one you are seeing. The correct usage is:

---
// GOOD: Import the image
import myImage from "../my_image.png";
import { Image } from "astro:assets";
---
<Image src={myImage} alt="Cool image" />

Incorrect usage (causes errors):

<Image src="../my_image.png" alt="Cool image" />

or

<Image src={myImage.src} alt="Cool image" />

This is explicitly documented in the LocalImageUsedWrongly error reference.

How to fix:

  • Make sure you are importing your images using ESM imports (e.g., import img from './path/to/image.jpg') and passing the imported variable to the src prop of <Image />.
  • Do not use string file paths for local images in the src prop.

If you are dynamically importing images (e.g., with import.meta.glob), ensure you are invoking the import function to get the image module, and then passing the default export to <Image />. See the dynamic image import recipe for a working example.

#

If you follow these patterns and still see errors, double-check that the image files exist at the specified paths and that there are no typos in your import statements. If the image is missing, you may also encounter the ImageNotFound error.

Summary:
This error is caused by passing a string file path to <Image /> instead of an imported image. Update your code to use ESM imports for local images to resolve the issue. For more details, see the Astro image usage guide and the LocalImageUsedWrongly error reference.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@worthy raptor Kapa.ai is still learning and improving, please let me know how I did by reacting below.

worthy raptor
#

@urban loom how about images imported using import.meta.glob, which are instances of ImageMetadata?

urban loomBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

When you use import.meta.glob to import images in Astro, the imported modules are typically functions that, when invoked, return a promise resolving to an object with a default export of type ImageMetadata. To use these images with the <Image /> component, you need to pass the promise (or its resolved value) to the src prop.

According to the documentation, the <Image /> component's src prop accepts:

When using import.meta.glob, you should invoke the import function to get the promise, and pass it directly to <Image />:

---
// Example using import.meta.glob
import { Image } from 'astro:assets';
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}');
const imagePath = '/src/assets/avatar-1.jpg'; // Example path
---
<Image src={images[imagePath]()} alt="Avatar" />

This is the recommended approach, as shown in the dynamic image import recipe.

Summary:
Images imported using import.meta.glob (as ImageMetadata instances) can be used with <Image /> by passing the promise returned from invoking the import function. This is fully supported and documented in the official Astro recipes and API reference.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: