feat: support placeholder #477
Conversation
src/runtime/components/nuxt-img.vue
Outdated
| created () { | ||
| mounted () { | ||
| if (this.placeholder) { | ||
| this.image = this.placeholder |
There was a problem hiding this comment.
This is a nice start but also means on initial hydration, actual images only start loading when the whole JS bundle is loaded and hydration happens. We can enhance it later with a head script doing the same and hydrating from a data- attribute.
There was a problem hiding this comment.
I suppose hydrating from a data atrribute would make a great addition for lazy loading images.
Codecov Report
@@ Coverage Diff @@
## main #477 +/- ##
==========================================
- Coverage 58.95% 58.55% -0.41%
==========================================
Files 34 34
Lines 709 719 +10
Branches 236 238 +2
==========================================
+ Hits 418 421 +3
- Misses 284 291 +7
Partials 7 7
Continue to review full report at Codecov.
|
|
Thanks for working on this. I've pushed few improvements to directly use |
Co-authored-by: Pooya Parsa <[email protected]>
|
Hi, It seems that the placeholder does not work for cloud providers? I am using Hygraph as the image provider and I get a crashed image icon when loading the image. |
4 participants
A starting point to resolve #189
Example added on the playground app.
Suggestions and/or contributions by fellow Nuxters would be appreciated!