Defining a custom, external Image service

[tpiros]

What version of astro are you using?

2.1.3

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

nom

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I have experimented with trying to add an external image service.

I could be missing a step - and I have read through the docs multiple times. What I've struggled with is to add my own custom service. In the page linked above (and in the docs as well) it's stated that in astro.config.mjs under image: { service: we can specify three options - two of which are built in: astro/assets/services/squoosh, astro/assets/services/sharp and string.

What I have struggled with is finding the right location to place my own custom external service. I have tried multiple locations but no matter what I always ended up with [astro] Unable to load /Users/.../app/astro.config.mjs.

Until I have tried and added astro/assets/services/squoosh and I went in and added my own custom JS code to node_modules/astro/dist/assets/services/squoosh.js - effectively replacing what was in that file with my own logic. Then, I was able to run a dev build of the site and in fact the image was rendered from the custom service.

So it's either that I am missing a critical step in the process or, that image/service property is only accepting the two built-in values and not string.

(There was also a discussion about this on Discord)

This is how the astro.config.mjs file looks like now - remembering that I have rewritten squoosh.js:

export default defineConfig({
  experimental: {
    assets: true,
  },
  image: {
    service: 'astro/assets/services/squoosh',
    // service: 'what to put here with a custom external image service?!'
  },
});

Link to Minimal Reproducible Example

n/a

Participation

• I am willing to submit a pull request for this issue.