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"
/>