N
Nuxt9mo ago
Mubo

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
Single9mo 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
Mubo
MuboOP9mo 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
Single9mo 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.
Want results from more Discord servers?
Add your server