Nuxt.js のv-for内部で、動的にファイルのURLを作成する

地味にハマったのでメモ。

例えば、下記のように画像ファイルのURLをべた書きしたならば、ちゃんと /_nuxt/src/assets/images/consultants/1.jpg として認識してくれる。

<div v-for='user in users' :key='user.id'>
  <img src='~/assets/images/profiles/1.png' />
</div>

v-forでユーザー一覧データを回していることから分かってもらえる通り、 :src を指定して動的にURLを指定したい。

<div v-for='user in users' :key='user.id'>
  <img :src='~/assets/images/profiles/' + user.id + '.png' />
</div>

しかし、実際は下記のようなエラーとなってどうしても出来なかった。

1.jpg:1 GET http://localhost:3001/~/assets/images/profiles/1.jpg 404 (Not Found)

~ は nuxt.config.js にて指定できる srcDir （デフォルトは rootDir ）のエイリアスで、 /_nuxt/src/ に置き換えてくれる。

こういう場合は require してあげればokとのこと。（教えてくれた 後輩ちゃん ありがとー！）

<div v-for='user in users' :key='user.id'>
  <img :src=require('~/assets/images/profiles/' + user.id + '.png') />
</div>