原文鏈接: webpack 在js中引入靜態圖片

上一篇: gif 屏幕錄制

下一篇: js 使用默認參數達到強制參數的目的

在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編碼引入，效率比第一次的要好一點

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。