Component to handle most common use cases
srchulo opened this issue · 5 comments
Is your feature request related to a problem? Please describe.
This module is really useful and customizable, but it can be hard to put together the most common options that you want, and sometimes repetitive (needing to repeat the asset location multiple times in multiple requires).
Describe the solution you'd like
I think it would be great to have some helper components that make the most commonly desired behaviors for images super easy, such as:
- Lazy loading
- LQIP while loading
- Use webp version if possible in
<picture> - Creating multiple sizes of the image and using srcset
Bonuses:
- Would be great to have a way to do something similar with background images on elements like divs.
- Would be very cool if it could somehow work with blogs when rendering markdown that has images (like with @nuxtjs/markdownit), or when using v-html.
I've filed a request on Nuxt to have a built in image component solution, but maybe this would also be an appropriate place?
Describe alternatives you've considered
I've tried implementing it myself a number of different ways, and it's taken a lot of time and my solutions probably aren't the best :) Most recently I used this article along with this nuxt-lazysizes-aspect-ratio-blur repository to get a little closer to what I want (a component that takes care of most of the optimized image work for you), and I still made a fork and some changes to get the image component to be a little better.
I'm currently working on something similar, with the same goals as you wrote in your post. But I'm having the issue that webpack does not find the image dynamically (#229). Have you come across the same problem? Maybe we can help each other out.
@michaelschufi I had the same issue. I had to require the image before passing it into any component, if that's what you mean.
There is a work in progress nuxt image module: https://github.com/nuxt/image
@shadow81627 very cool! Thanks for letting me know. Starred! :)
@michaelschufi I had the same issue. I had to require the image before passing it into any component, if that's what you mean.
I also solve this. Couldn't find a more elegant way. Although I really wanted