image icon indicating copy to clipboard operation
image copied to clipboard

`sizes` and `placeholder` attribute do not work in `preset` from `nuxt.config.ts`

Open BananaAcid opened this issue 1 year ago • 3 comments

It might also be me, but I found no documentation on how to configure sizes and placeholder in the docs.

It did not work, but I expected to be able to use a preset to configure the params for a NuxtImage:

export default defineNuxtConfig({
  modules: [
    ["@nuxt/image", {
      quality: 60,
      format: ['webp'],
      
      presets: {
        hero: {
          sizes: {sm:'50vw', md:'100vw', lg:'150vw', xl:'400vw'},
          placeholder: true,
          
          modifiers: { // passed into the URI
            quality: 70
          }
        }
      }
    }],
  ]
});

BananaAcid avatar Feb 19 '24 13:02 BananaAcid

same here, format, alias is also not working from nuxt.config.ts , however format works directly using prop!

image: {
    quality: 80,
    format: ['avif', 'webp'],
    domains: ['example.org'],
    alias: {
      example: 'https://example.org'
    }
}

geminigeek avatar Feb 19 '24 22:02 geminigeek

It looks like issue #734 already exists asking about support for sizes in presets and whether it's a documentation issue or if it's not currently supported (and thus a feature request).

Perhaps this could be merged into the existing issue with the addition of the question around placeholder in the same context?

joshualyon avatar Jun 25 '24 15:06 joshualyon

Since this seems like a "won't fix" issue ... I coded a solution for myself that wraps NuxtImg to make it configurable from the nuxt.config.ts with all options.

Have a look

BananaAcid avatar Jun 26 '24 01:06 BananaAcid