Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug in NuxtImg sizes configuration: Incorrect default size assignment #2 #1336

Closed
sparrow-chik-chrk opened this issue Apr 22, 2024 · 0 comments

Comments

@sparrow-chik-chrk
Copy link

sparrow-chik-chrk commented Apr 22, 2024

I'm reopening the issue because the first one was closed even though the problem still exists. #1331

Description

There seems to be a misconfiguration issue with how NuxtImg handles the sizes attribute, particularly with the assignment of default and conditional sizes based on breakpoints.

Issue

It's written in the documentation.

If you omit a screen size prefix (like sm:) then this size is the 'default' size of the image. Otherwise, Nuxt will pick the smallest size as the default size of the image.
This default size is used up until the next specified screen width, and so on. Each specified size pair applies up - so md:400px means that the image will be sized 400px on md screens and up.

That is, it is planned that for such a configuration
100vw sm:50vw md:400px

100vw will be for everyone, sm:50vw - the sm prefix for 50vw, md:400px - the md prefix for 400px

in HTML, it should look something like
(max-width: sm) 50vw, (max-width: md) 400px, 100vw

but in fact, the pairs are created not through :, but through a space, and are separated by :.
and the result we have is
(max-width: sm) 100vw, (max-width: md) 50vw, 400px

I tested many times, check it yourself. Either the documentation is incorrect, or the logic

I can provide additional data directly with screenshots of the problem from my server.

@sparrow-chik-chrk sparrow-chik-chrk closed this as not planned Won't fix, can't repro, duplicate, stale Apr 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant