Skip to content

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

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

    Fields

    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