Nuxt3で画像がうまく読み込めない

問題

画像のファイルパスは間違っていないのにうまく表示されない。

解決策

Nuxt3からViteと呼ばれるビルドツールがデフォルトになった。
Vite公式によると、以下のようにURLクラスからインスタンスを生成して、hrefのプロパティを渡す必要がある。

const imgUrl = new URL('./img.png', import.meta.url).href

実装例

asset/image ディレクトリに複数の画像を置いた場合、参照する実装例。

[id].vue

<template>
  <div>
    <img :src="imgUrl"/>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const id = route.params.id
const imgUrl = new URL(`../assets/image/${id}.png`, import.meta.url).href
</script>