TWSNMP FC:マップに背景画像を表示する　途中

今朝は猫より早く起きました。時計を見ると４：４４でした。縁起が良いのか悪いのか？７：７７はないし３：３３は早すぎるし５：５５は遅すぎるので良しとしましょう。猫は６時ぐらいまでかみさんの布団に潜って寝ていました。７時ぐらいに騒ぐのでレトルトをあげると一瞬ぷいっとしました。前は食べていたはずなのに、何とか説得して食べてもらいました。

さて、今日はマップの背景に画像を表示する機能を作ることにしました。
復刻版では、

のような感じです。仕様について少し悩みました。画像をアップロードするのか予めファイルを特定のフォルダにいれておくのか。アップロードすることにました。まずはNuxt.js+Vuetifyでファイルをアップロードする方法について調べました。Vuetifyのファイルの選択は

ファイルインプット・コンポーネント

VutifyではないですがNuxtでファイルをアップロードする部分は、

Nuxt.jsで画像を含む投稿機能を作る - Qiita

を参考にしました。
今日はアップロードする画面だけ作りました。

マップの設定に＜背景画像＞ボタンをつけてクリックすると背景画像をアップロードするダイアログを表示します。復刻版では固定位置に画像のサイズそのままで表示していましたが今回は位置とサイズを調整できるようにしました。今日の作業は、

背景画像設定のダイアログ追加 · twsnmp/twsnmpfc@5f8dad9

です。明日に続く。