webpack 在js中引入静态图片

最新推荐文章于 2022-06-16 18:45:48 发布

阿豪boy

最新推荐文章于 2022-06-16 18:45:48 发布

阅读量257

点赞数

文章标签： java vue nodejs svg base64

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066610

版权

原文链接: 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编码引入，效率比第一次的要好一点