Preloading responsive image - Nuxt 2

[martindrakul]

When using preload on an image with sizes defined, the link in head should include the imagesizes and imagesrcset attributes:

<nuxt-img
  src="/random.jpg"
  preload
  sizes="sm:48vw md:30.73vw lg:18.23vw xl:248px"
 />

Renders fine in the body:

<img 
  src="/_ipx/w_248/random.jpg" 
  sizes="(max-width: 640px) 48vw, (max-width: 768px) 30.73vw, (max-width: 1024px) 18.23vw, 248px" 
  srcset="/_ipx/w_307/random.jpg 307w, /_ipx/w_230/random.jpg 230w, /_ipx/w_184/random.jpg 184w, /_ipx/w_248/random.jpg 248w"
/>

But not in the head:

<link 
  data-n-head="ssr" 
  rel="preload" 
  as="image" 
  href="/_ipx/w_248/random.jpg"
/>

Expected:

<link 
  data-n-head="ssr" 
  rel="preload" 
  as="image" 
  imagesizes="(max-width: 640px) 48vw, (max-width: 768px) 30.73vw, (max-width: 1024px) 18.23vw, 248px" 
  imagesrcset="/_ipx/w_307/random.jpg 307w, /_ipx/w_230/random.jpg 230w, /_ipx/w_184/random.jpg 184w, /_ipx/w_248/random.jpg 248w"
  href="/_ipx/w_248/random.jpg"
/>

[kostopravby]

I have the same issue with static target. The plugin preload only the last size from imagesizes.

[chelorope]

I took some time to implement this feature, please see https://github.com/nuxt/image/pull/1004