Nuxt Vue3 Inputで選択した画像を表示する

Input type="file"から画像を表示する

プログラミン初心者です。
間違ってたらごめんね

<script setup lang="ts">
// imageの値を変更できるようにする(ref)
const image = ref<string>("")

// v-onで使う関数
const upladFile = (e: any) => {
  // file情報取得
  const file = e.target.files[0]
  // 取得したファイル情報を 
  // (createObjectURL)の引数に入れることでファイルにアクセス可能な
  // (URL)を作成することができます
  const url = URL.createObjectURL(file)
  // (url)をimageに代入する
  image.value = url
}
// 画像を消す
const deleteFile = () => {
  image.value = ""
}
</script>

v-modelは使えないのでchangeイベントを使う

<template>
    <div>
      <input type="file" @change="upladFile"/>
    </div>
    <!-- 画像を表示する -->
    <div>
        <img src="image">
    </div>
</template>