#can't find image

4 messages · Page 1 of 1 (latest)

dry plume
#

I'm importing an image from the src/ directory:

import rental601 from '@images/activities/601-rental.webp'

When I try to use rental601 in a function I get an error saying it can't find: 601-rental.webp?origWidth=1920&origHeight=1000&origFormat=webp' which makes sense because I don't have the query parameters in my file name. So I try to chop them off using split:

const unoptimizedBackgroundPath = backgroundPath.split('?')[0]

And it still can't find the image. But that is my image path

11:58:19 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:
Error: ENOENT: no such file or directory, open '/@fs/home/grahf/Code/blah/src/images/activities/601-rental.webp'
  Hint:
    Make sure your promises all have an `await` or a `.catch()` handler.
  Error reference:
    https://docs.astro.build/en/reference/errors/unhandled-rejection/
stoic zincBOT
#

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

#

Astro’s image pipeline doesn’t work with string file paths the way you’re trying to use them. The error you’re seeing is consistent with how astro:assets expects images to be passed around.

From the docs:

Image’s and getImage’s src parameter must be an imported image or a URL, it cannot be a string filepath. [Local image error]

Example of correct usage:

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

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

<!-- BAD: src is myImage.src or a string path -->
<Image src={myImage.src} alt="Cool image" />
<Image src="../my_image.png" alt="Cool image" />

Key points for your case:

  1. import rental601 from '@images/activities/601-rental.webp' gives you an image object, not just a string path.
  2. Passing rental601 into Image/getImage is correct; passing rental601.src or any string you build (like from split) is not supported with the default image service. [Local image error]
  3. The ?origWidth=... query is added by Astro internally; you should not strip or modify it. Use the imported object as-is.

So instead of:

const unoptimizedBackgroundPath = backgroundPath.split('?')[0];
// later: use unoptimizedBackgroundPath as a file path

you should keep and pass around the imported image object:

import rental601 from '@images/activities/601-rental.webp';

const backgroundImage = rental601; // keep the object

// In .astro:
<Image src={backgroundImage} alt="Rental 601" />

If you truly need a raw <img> tag, you can use rental601.src directly in markup, but not as the src for Image/getImage:

# 
<img src={rental601.src} alt="Rental 601" />

If you’re doing something more complex (e.g. passing into a helper function), that function should accept the imported image object, not a string path.

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