【Vue.js】inputタグで選択した画像を表示する

こんな感じで選択した画像が表示されます。

Vue Playground で試してみてください。

<template>
  <form>
    <div>
      <input type="file" @change="displayImage" />
      <img :src="image" style="max-width: 500px" />
    </div>
  </form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const image = ref<string>('');

function displayImage(event: Event) {
  let file = event.target.files[0];
  if (new RegExp('^image/(png|jpeg)').test(file.type)) {
    let url = URL.createObjectURL(file);
    image.value = url;
  } else {
    image.value = '';
  }
}
</script>