nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.34k stars 270 forks source link

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

Open BananaAcid opened 8 months ago

BananaAcid commented 8 months ago

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
          }
        }
      }
    }],
  ]
});
geminigeek commented 8 months ago

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'
    }
}
joshualyon commented 4 months ago

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?

BananaAcid commented 4 months ago

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