Fail to use v-bind on img src in vue3

Now I’m building a vue3 project in vite. But I found a weird error.

The following code work perfectly:

<template>
  <img src="@/assets/images/pics/cover_info.jpeg">
</template>
<script>
export default {
  name: 'Image',
  data() {
  return {
    
  };
}
};
</script>

While I change to v-bind, the server failed to load the img

<template>
  <img :src="ImgUrl">
</template>
<script>
export default {
  name: 'Image',
  data() {
  return {
    ImgUrl: '@/assets/images/pics/cover_info.jpeg',
  };
}
};
</script>

the console show following info:
GET http://localhost:5173/assets/images/pics/cover_info.jpeg 404 (Not Found)

Thank you for your patient and hope for your reply.