原文鏈接: webpack 在js中引入靜態(tài)圖片

上一篇: gif 屏幕錄制

下一篇: js 使用默認(rèn)參數(shù)達(dá)到強(qiáng)制參數(shù)的目的

在js中引入靜態(tài)文件

在自己實(shí)現(xiàn)一個(gè)tab組件時(shí)遇到這個(gè)問題，點(diǎn)擊不同的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: '影評(píng)'},{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: '我'},]

但是這種方式需要再次請(qǐng)求，由于這幾個(gè)圖片都是比較小的，所以這種方式的效率不是很高

使用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: '影評(píng)'},{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: '我'},]

實(shí)現(xiàn)同樣的功能，但這次會(huì)將圖片放入js文件中，以base64編碼引入，效率比第一次的要好一點(diǎn)

總結(jié)

以上是生活随笔為你收集整理的webpack 在js中引入静态图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。