Import image from vue with vite configured

I am learning vue.js, in an example like below, but when I run the code, the image can’t display.

<template>
  <img v-bind:src="logo" />
</template>
<script setup>
const logo = '../assets/logo.png';
</script>

When I visit http://localhost:3000, it report the following error:

http://localhost:3000/assets/logo.svg not found

When I changed .. to @, it still report error like below:

http://localhost:3000/@/assets/logo.svg not found

And finally I find that I need to use import statement like below:

<template>
  <img :src="logo" />
</template>

<script setup>
import logo from '@/assets/logo.svg';
</script>

Actually, .. also works when use import statement like below:

<template>
  <img :src="logo" />
</template>

<script setup>
import logo from '../assets/logo.svg';
</script>