Nuxt•8mo ago

Responsive images, images based on breakpoint

Hello I would like to ask if it would be possible to have responsive images or images based on breakpoint. Something similar to what sizes in nuxt-image is. I would need to use ‘image1’ on mobile and then ‘image2’ on tablet and such. Is this possible ?

3 Replies

Single•8mo ago

If it is only about scaling the image, i would recommend to use tailwind and add classes following breakpoints (eg. sm:w-full md:w-1/2). If you want to swap the image, i would recommend to use https://vueuse.org/core/useBreakpoints/#usebreakpoints and change the source according to the current viewport.

VueUse

Collection of essential Vue Composition Utilities

MuboOP•8mo ago

Thank you 🙌 . This might work but it will require js to swap the images. I was thinking that if i could access the source elements inside picture element i could use different url for different breakpoints using image media queries

Single•8mo ago

I see, this is less of a nuxt question but html.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

The media attribute will do the trick here. The img tag is being used as fallback.

Gaming

Programming

Responsive images, images based on breakpoint