I don't know if I'm getting this wrong but it's not possible to run this in production, I'm trying to run it as a node middleware,

import { generateImage } from 'astro-eleventy-img';

const myImage = generateImage('src/assets/my_image.png', {
  // The options here are passed directly to eleventy-img
  widths: [300],
  formats: ['webp', 'avif'],
});


<img src={myImage.webp[0].url} />

Here in the docs you clearly import the image as a non-relative file path. While in Astro docs: https://docs.astro.build/en/guides/images/#src

They state that it should be imported as a relative path.

In production when we try to generate the image with a non-relative path the image is not found, resulting in the error:

Lone/dist/server/entry.mjs:8512:5) {
  errno: -4058,
  syscall: 'stat',
  code: 'ENOENT',
  path: './assets/images/Copper1.jpg'
}

Couldn't figure out a fix I don't know if I have something wrong!

ofc running this in dev has no problem since we still have access to src.

Hi

Im trying to create a new component so i can pass different options, following your markdownimage example. But im getting an error about the lack of renderers

Unable to render BackgroundImage!

There are no `renderers` set in your `astro.config.mjs` file.

any tips on this?

Hi!

Thanks for this useful package.

I noticed that custom placeholder options were not applied (I tried passing { outputDir: "src/assets/placeholders/showcase" }, which did not work).

To fix this, the order of custom and default options have to be flipped for Object.assign, so that the custom ones take precedence.

Problem

Due to the script getting the stats in a sync kind of way while the image is generated asynchronously, sometimes the page will load before the image is done generating which will do a 404 until refresh

Possible solutions

We should probably do it fully async? In the past I've encountered issues with that but maybe things are different now