记录一次遇到的问题 :
Vant 底部栏小图标激活切换效果 ,给src加了冒号，就不编译了
通过 拼接了字符串，不过失效了
如果需要绑定属性，需要用require(path)的方式
<img :src="require(`@/assets/tabs/index_${active ? 1 : 0}.png`)" />
我们项目中的图片通常存放在src/assets目录中
> 如果将图片放在public目录下：该资源将作为静态资源一起打包
>如果将图片放在src/assets目录下：脚手架在运行时将会编译src下的所有资源。
脚手架项目一定要经过编译(将src下的源代码、资源文件转换成浏览器所能解析运行的 html,css,js)，脚手架npm run serve 或 npm run build 时会编译；对于src下的图片，脚手架在编译时，发现如果图片足够小，浙江图片编译成base64图片编码，直接赋值给src属性。再也没运行时减少小图片的请求频率，优化性能；
1.如何访问public下的图片
若有如下图片资源 public/img/1.jpg
访问方式：/img/1.jpg
2.如何访问assets目录下的图片
若有如下图片资源 src / assets / tabs / index_0.png
src下的资源都是用相对路径(不使用斜杠开头)来访问
<img src="../assets/tabs/index_0.png" />
<img src="@/assets/tabs/index_0.png" />
最终的实现方式
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000"> <van-tabbar-item v-for="icon in icons"> <span>{{ icon.title }}</span> <template #icon="props"> <img :src="props.active ? icon.active : icon.inactive" /> </template> </van-tabbar-item> </van-tabbar>
<script setup lang="ts">import { ref, reactive } from 'vue'const active = ref(0)const icons = reactive([ { title: '电影/影院', active: require('@/assets/tabs/index_1.png'), inactive: require('@/assets/tabs/index_0.png'), }, { title: '视频', active: require('@/assets/tabs/video_1.png'), inactive: require('@/assets/tabs/video_0.png'), }, { title: '演出', active: require('@/assets/tabs/show_1.png'), inactive: require('@/assets/tabs/show_0.png'), }, { title: '我的', active: require('@/assets/tabs/me_1.png'), inactive: require('@/assets/tabs/me_0.png'), },])</script>
