image icon indicating copy to clipboard operation
image copied to clipboard

Wrong behaviour of vercel provider

Open korve opened this issue 2 years ago • 2 comments

I'm using the vercel provider right now and i've come across what i think is a major bug in the provider.

The problem arises when using the screens option for NuxtImg. Lets take this screens value for example: 95px tablet:160px desktop:95px. I would imagine that the image would have a size of 95px on mobile and desktop and 160px for tablets. The image.screens configuration could look like this:

{
    tablet: 768,
    desktop: 1280
}

The actual behaviour is that the image is resized to the nearest screen breakpoint! This seems illogical to me. The size should be the actual size provided for the screen, not the breakpoint width. Did i misunderstand the screens attribute or is this a limitation of vercel?

korve avatar Nov 14 '23 08:11 korve

Ok, i've looked into it. When i remove the resizing to the nearest breakpoint and request a custom image size, vercel throws and error INVALID_IMAGE_OPTIMIZE_REQUEST. Apparently you have to configure the screen sizes beforehand. Maybe the doc should be improved on that matter?

korve avatar Nov 16 '23 07:11 korve

I have a similar issue. picture sizes is not working as intended. works on localhost, not on Vercel, Vercel is using his own image breakpoints for some reason. i found a temporary fix using md:max-w-[your wanted max width] in my case the image was too big on desktop and was going off the container bounds.

  <NuxtPicture
      class="mx-auto justify-center" 
      sizes="400px"  // THIS DOES NOT WORK AND GETS REPLACED
      src="/images/profilepic.jpg" 
      :img-attrs="{ class: 'rounded-[30px] md:max-w-[400px]' }"
  ></NuxtPicture>

Ashrakk avatar Feb 01 '24 16:02 Ashrakk