js 图片转base64_图片的引用方式和其打包处理

在日常项目中图片可以通过img标签引入也可以通过元素的background-image引入。那么具体两种引入方式在使用中有什么区别，在打包的时候应该如何配置？本次来进行解析。 1.通过img标签引用

<template>
  <div id="app">
    <img class="pic1" src="./assets/test.png">
  div>
template>
<style>.pic1{width: 300px;height: 200px;
}style>

在img标签这个行内元素中，我们仍然可以通过css的width和height属性来控制图片的宽和高。 在vue框架中，也可以通过v-bind来用变量来给src赋值，变量即为通过require引用的图片。例如下面的示例，通过判断recordAudio.paused来为audioImg赋值播放或是暂停的图片。

<template>
  <div id="app">
    <img:src="audioImg"class="dialogAudioPlay"title="播放"
      @click="playAudio">
  div>
template>
<script>const play = require('assets/play.png')const pause = require('assets/pause.png')
...
if (recordAudio.paused) {this.audioImg = pause
  recordAudio.play()
} else {this.audioImg = play
  recordAudio.pause()
}
...script>

2.通过background-image: url()引用

<template>
  <div id="app">
    <div class="pic2">div>
  div>
template>
<style>.pic2{width: 300px;height: 300px;background: url('./assets/test.png') no-repeat center;background-size: 200px;
}style>

在上面的代码示例中，pic2的class定义了当前div元素的width和height，但是这只是定义了当前元素的大小。可以把这个宽高看做是剪纸中镂空元素的宽高，而透过这个镂空元素看到的图片就是这个背景图片，可以在background属性中通过url()引用图片，并且控制可以背景图的显示样式。background-size属性控制了背景图的大小。

通常是非内容的图片，或者是要引用图片中的一部分图标，就使用background-image写在css里面(用来修饰页面的元素)，如果是内容性的图片就使用img标签写在html里面。

说完了图片的引用，下面来说一下图片的打包。打包的过程中，我用的是vue-cli的脚手架，所以配置文件跟webpack直接打包的格式不太一样，不过原理是一样的。  在图片打包的时候，我们可以使用url-loader，因为url-loader可以对图片进行判断，当小于某个大小的值的时候就直接把图片打包成base64格式在js文件中，而不单独打包成一个图片文件。如下面的示例：

// vue.config.js
module.exports = {
    pages: {
        index: {
          // page 的入口
          entry: 'src/main.js',
          // 输出文件名
          filename: 'index.html'
        }
      },
      css: {extract: false},
      chainWebpack: config => {
        config.module
          .rule('images')
          .use('url-loader')
          .loader('url-loader')
          //.tap(options => Object.assign(options, { limit: 30720 }))
          .tap(options => Object.assign(options, { 
              limit: 20480 , 
              name: '[name]_[hash].[ext]'
          }))
      }
}

vue-cli的配置文件所示，当图片文件小于20KB的时候打包成base64格式，通过在浏览器中直接运行js来显示出来。当图片大于20KB的时候，单独打包成一个图片，通过网络请求来加载出来。显然，如果图片过大时依然使用base64格式会因为使浏览器执行过大的js文件，导致性能下降。所以在真实项目中，可以设定阀值为几KB，如果大于这个值就单独打包成一个图片文件。下图为通过img和background-image两种方式引入图片加载成base64的效果。

说到这里有一种特殊情况，就是像上一篇文章中的vue组件，如果在组件中需要一个图片，但是我们在打包组件中，没有办法把引入的图片打包到所使用的项目的静态资源目录中，来通过http的静态资源请求请求到，所以也是可以通过base64的格式打包到组件内部。 赏赞即可得到作者微信呦~