どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

Vue.jsで画像プレビュー用コンポーネントを作る

f:id:nogawanogawa:20190811175019p:plain:w300

普段Vuetify使ってるんですが、画像のプレビューのコンポーネントが用意されていませんでした。

その部分を自分で作ったので今回はそのメモです。

コンポーネント

早い話が画像選択すると、ブラウザ画面上でどの画像を選択したか確認したいわけです。

コード

コードはこんな感じになりました。

後は、これを他のコンポーネントからインポートすれば普通に使えるはず。。。

親コンポーネントはこんな感じですかね。

参考画像

参考までに、画面としてはこんな感じになります。

f:id:nogawanogawa:20191006015624p:plain

感想

画像ファイルアップロード画面にプレビュー機能があるとすごく嬉しいので、作ってみましたって話です。