feat(img): Add support of multiple dpi's(dpr's) for one img

[Kolobok12309]

Problem

Current <NuxtImg/> can't render srcset for different dpi screens and we use workarounds like this

<NuxtImg
  :src="imageUrl"
  width="50"
  :srcset="`${$img(imageUrl, { width: 50 })}, ${$img(imageUrl, { width: 100 })} 2x`"
/>

And this example is simply, because it haven't sizes

Solution

My solution is use additional prop dprs and for each entry in srcset, add multiplied copy, for example

Simple

// Source
<NuxtImg
  :src="imageUrl"
  width="50"
  :dprs="[2, 3]"
/>

// Result
<img
  src="imageUrl"
  width="50"
  srcset="imageUrl_50 50w, imageUrl_100 100w, imageUrl_150 150w"
>

Responsive

// Source
<NuxtImg
  src="imageUrl"
  sizes="sm:200px lg:400px"
  :dprs="[2, 3]"
/>

// Result
<img 
  src="imageUrl_400" 
  srcset="imageUrl_200 200w, imageUrl_400 400w, imageUrl_600 600w, imageUrl_800 800w, imageUrl_1200 1200w" 
  sizes="(max-width: 640px) 200px, 400px"
>

Additional

Dpr from providers

Some providers accept dpr property that to same thing that width * dpr, but not all of them accept it. Because it used simple multiply

#113

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Image	Edit on Studio ↗︎	View Live Preview	e45faa4

[netlify]

👷 Deploy request for nuxt-image-v1 pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	e45faa4