在js中引入静态文件
在自己实现一个tab组件时遇到这个问题,点击不同的tab,切换不同的路由
<div v-for="tab,index in tabs" :key="index">
<div class="tab" @click="changeTab(tab,index)">
<img :src="cur_index==index ? tab.active : tab.base" alt="" class="tab-img">
<span class="tab-name"
:style="cur_index==index ? 'color: #1296db':'color:rgb(111,111,111)'">{{tab.name}}</span>
</div>
</div>
第一次的引入方式引入static目录下的文件
tabs: [
{
active: "/static/imgs/movie_active.png",
base: "/static/imgs/movie_base.png",
path: "/main/movie",
name: '电影'
},
{
active: "/static/imgs/comment_active.png",
base: "/static/imgs/comment_base.png",
path: "/main/review",
name: '影评'
},
{
active: "/static/imgs/collection_active.png",
base: "/static/imgs/collection_base.png",
path: "/main/collection/movie",
name: '收藏'
},
{
active: "/static/imgs/me_active.png",
base: "/static/imgs/me_base.png",
path: "/main/me",
name: '我'
},
]
但是这种方式需要再次请求,由于这几个图片都是比较小的,所以这种方式的效率不是很高
使用require 加载assets目录下的图片
tabs: [
{
active: require("../assets/imgs/movie_active.png"),
base: require("../assets/imgs/movie_base.png"),
path: "/main/movie",
name: '电影'
},
{
active: require("../assets/imgs/comment_active.png"),
base: require("../assets/imgs/comment_base.png"),
path: "/main/review",
name: '影评'
},
{
active: require("../assets/imgs/collection_active.png"),
base: require("../assets/imgs/collection_base.png"),
path: "/main/collection/movie",
name: '收藏'
},
{
active: require("../assets/imgs/me_active.png"),
base: require("../assets/imgs/me_base.png"),
path: "/main/me",
name: '我'
},
]
实现同样的功能,但这次会将图片放入js文件中,以base64编码引入,效率比第一次的要好一点