Nuxt で 静的画像を lazyload をする方法
html
<source
srcset="~/assets/images/placeholder.png"
:data-srcset="`~/assets/images/sp-xx.jpg`"
media="(max-width: 640px)"
/>
<img
src="~/assets/images/placeholder.png"
:data-src="`~/assets/images/pc-xx.jpg`"
alt=""
class="lazyload"
/>
こんな感じで data-src に画像パスをバインディングしてしまうと HTML でもそのまま data-src="~/assets/images/pc-xx.jpg" と出力されてしまい画像を読み込めません。
そんなときは require するとうまくいきます。
html
<source
srcset="~/assets/images/placeholder.png"
:data-srcset="require(`~/assets/images/sp-xx.jpg`)" ← 変更
media="(max-width: 640px)"
/>
<img
src="~/assets/images/placeholder.png"
:data-src="require(`~/assets/images/pc-xx.jpg`)" ← 変更
alt=""
class="lazyload"
/>
