【Nuxt】GETパラメータによってimgタグのsrc属性を動的に変更する

はじめに

Nuxt.jsでGETのクエリで取得したパラメータの値によって変えようとして少しハマったので備忘録として投稿する。あくまでも一つの方法なので、参考程度にお願いします。

方法

http://localhost/result?id=ABC123のようにidのGETのクエリによって切り替えることを例に説明する。
以下のようにsrcをバインドする。バッククオートを用いることで評価式の結果を文字列としてそのまま書き出してくれる。また、$route.query.id。

<img :src="`http://localhost/${$route.query.id}.jpg`"/>

このようにすると以下のように変換してくれる。

<img :src="`http://localhost/ABC123.jpg`"/>