vue3动态引用本地图片不生效甚是报404

这里的引用图片未生效而且报错

<template>
 <img :src="imgurl" alt="" style="width: 60px; margin-right: 5px" />
template>
<script>
export default {
  setup() {
    const state = reactive({
      imgurl: "@/assets/images/restaurant5.png",
      })
      return {
      ...toRefs(state),
      }
  }
}
script>

控制台报404

解决办法

<template>
 <img :src="getAssetURL(`restaurant5.png`)" alt="" style="width: 60px; margin-right: 5px" />
template>
<script>
export default {
  setup() {
    const state = reactive({
      imgurl: "@/assets/images/restaurant5.png",
      })
      const getAssetURL = (image) => {
      return new URL(`/src/assets/images/${image}`, import.meta.url).href;
    };
      return {
      ...toRefs(state),
      getAssetURL
      }
  }
}
script>