地味にハマったのでメモ。
例えば、下記のように画像ファイルの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>