Nuxtで画像ファイル名に変数を入れたい場合

Nuxt

地味に、変数を画像ファイル名に入れて、かつsrcsetを使いたい時悩んだので、備忘録も兼ねてメモ

画像を呼び出す時

<template lang="pug">
img(src="~assets/images/hogehoge.jpg" srcset="~assets/images/hogehoge@2x.jpg 2x")
</template>

アセット - Nuxt.js にあるように、

  • ~/assets とせずに、~assets とする。
  • 文字列として渡す

そうするとコンパイル時に、require('~assets/images/hogehoge.jpg') に変換してくれる。

変数をファイル名に入れて、画像を呼び出す時

img(:src="require('~/assets/images/hogehoge' + variable + '.jpg')" srcset="require('~/assets/images/hogehoge' + variable + '.jpg') + ' 2x")

一方、変数をファイル名に使いたい場合は、

  • ~assets とせずに、~/assets とする。
  • Javascriptとして渡し、かつrequireで囲んであげる

これでOKなはず。