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>