feat: support placeholder

[treboryx]

A starting point to resolve #189

Example added on the playground app.

Suggestions and/or contributions by fellow Nuxters would be appreciated!

[pi0]

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.

[treboryx]

I suppose hydrating from a data atrribute would make a great addition for lazy loading images.

[codecov-commenter]

Codecov Report

Merging #477 (816202a) into main (94625ce) will decrease coverage by 0.40%.
The diff coverage is 28.57%.

@@            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              

Impacted Files	Coverage Δ
src/runtime/components/image.mixin.ts	81.81% <ø> (ø)
src/runtime/components/nuxt-img.vue	60.00% <28.57%> (-10.00%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 94625ce...816202a. Read the comment docs.

[pi0]

Thanks for working on this. I've pushed few improvements to directly use <NuxtImg placeholder> and auto generate URL.

[STY1997]

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.