8 replies

Astro Image component error

I get a File URL must be absolute error when using a really simple Image component setup:

---
import { Image } from "astro:assets";
import image from "../assets/cross-watermark.png";
---

<div>
  <Image
    src={image}
    alt=""
  />
</div>

---
import { Image } from "astro:assets";
import image from "../assets/cross-watermark.png";
---

<div>
  <Image
    src={image}
    alt=""
  />
</div>

 generating optimized images 
 error   File URL path must be absolute
  File:
    [file path]
  Code:
      50 |   const imageService = await getConfiguredImageService();
> 51 |   const resultData = await imageService.transform(
         |                                         ^
      52 |     fileData,
      53 |     { ...options, src: originalImagePath },
      54 |     buildOpts.settings.config.image.service.config
  Stacktrace:
TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute

 generating optimized images 
 error   File URL path must be absolute
  File:
    [file path]
  Code:
      50 |   const imageService = await getConfiguredImageService();
> 51 |   const resultData = await imageService.transform(
         |                                         ^
      52 |     fileData,
      53 |     { ...options, src: originalImagePath },
      54 |     buildOpts.settings.config.image.service.config
  Stacktrace:
TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute

I could have swore I've used this exact setup in multiple projects... I googled it, and apparently it was an issue in May of last year until they pushed a fix for it.

I already asked the Astro server (without much response), so I was wondering if anyone had a similar issue?

Some additional information too is that it works in the dev environment and builds in Netlify, but doesn't build locally...

KP-C

Kevin Powell - Community•3y ago•

8 replies

vince

Astro Image component error

I get a File URL must be absolute error when using a really simple Image component setup:

---
import { Image } from "astro:assets";
import image from "../assets/cross-watermark.png";
---

<div>
  <Image
    src={image}
    alt=""
  />
</div>

---
import { Image } from "astro:assets";
import image from "../assets/cross-watermark.png";
---

<div>
  <Image
    src={image}
    alt=""
  />
</div>

 generating optimized images 
 error   File URL path must be absolute
  File:
    [file path]
  Code:
      50 |   const imageService = await getConfiguredImageService();
> 51 |   const resultData = await imageService.transform(
         |                                         ^
      52 |     fileData,
      53 |     { ...options, src: originalImagePath },
      54 |     buildOpts.settings.config.image.service.config
  Stacktrace:
TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute

 generating optimized images 
 error   File URL path must be absolute
  File:
    [file path]
  Code:
      50 |   const imageService = await getConfiguredImageService();
> 51 |   const resultData = await imageService.transform(
         |                                         ^
      52 |     fileData,
      53 |     { ...options, src: originalImagePath },
      54 |     buildOpts.settings.config.image.service.config
  Stacktrace:
TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute

Astro Image component error

Similar Threads

Astro Image component error

Similar Threads

Similar Threads

Similar Threads