Skip to content

The density parameter in the configuration is not redefined, but adds new values ​​to the default ones #2020

@Semdevmaster

Description

@Semdevmaster

NuxtImage v2.0.0

<NuxtImg src="/test.jpg" width="500"/>
export default defineNuxtConfig({
  image: {
    densities: [4]
  }
})

This config gives this result

<img width="500" 
data-nuxt-img
 srcset="
/_ipx/f_avif&amp;w_500&amp;q_80/test.jpg 1x,
/_ipx/f_avif&amp;w_1000&amp;q_80/test.jpg 2x,
/_ipx/f_avif&amp;w_2000&amp;q_80/test.jpg 4x"
 onerror="this.setAttribute('data-error', 1)"
 src="/_ipx/f_avif&amp;w_500&amp;q_80/test.jpg">

If I only want 1x and use this configuration

export default defineNuxtConfig({
  image: {
    densities: [1]
  }
})

I still get the same result (1x adn 2x) but expected only (1x)

<img width="500" 
data-nuxt-img
 srcset="
/_ipx/f_avif&amp;w_500&amp;q_80/test.jpg 1x,
/_ipx/f_avif&amp;w_1000&amp;q_80/test.jpg 2x"
 onerror="this.setAttribute('data-error', 1)"
 src="/_ipx/f_avif&amp;w_500&amp;q_80/test.jpg">

The only thing that helps is either using a preset or the density attribute in NuxtImg

It's a similar story with the format parameter

export default defineNuxtConfig({
  image: {
    format: ['avif'],
  }
})

The image is still rendered as a JPEG, not an AVIF.
This can only be resolved by specifying a modifier for a specific provider or by using the format attribute in NuxtImg

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions