vue-cli使用图片

在vue2+vuecli项目中，使用静态资源如图片需要借助node的require

<template>
    <img :src="imgUrl">
</template>
<script>
   export default {
   	data(){
   		return {
   			imgUrl: require('@/assets/img/user.jpg')
   		}
   	}
   }
</script>

vite使用图片

方式一

使用import导入资源为URL

<template>
    <img :src="imgUrl">
</template>
<script setup lang="ts">
	import {ref} from 'vue'
	import imgUrl from '@/assets/b1f32a27b5e49b13.jpg'
	const imgUrl = ref(imgUrl)
</script>

使用控制台检查元素查看图片地址可以发现，imgUrl的值是文件相对于项目的根路径

这种方式是vite官网提供的例子，那么既然import导入资源返回的是文件相对路径的字符串，那么可不可以省去import直接写路径？答案是可以的。

方式二

直接写图片路径，注意一定要以/src/assets/开头

<template>
    <img :src="imgUrl">
</template>
<script setup lang="ts">
	import {ref} from 'vue'
	const imgUrl = ref('/src/assets/b1f32a27b5e49b13.jpg')
</script>

测试发现，直接写图片路径也是可以展示出图片的

背景图片

vite和vue-cli在使用背景图片的写法上有一点小区别 vue-cli:

background: url("~@/assets/user.jpg");

vite:

background: url("@/assets/user.jpg");

一个不太明显的差别，vite在使用背景图片时省去了@前面的~符号