一、图片打包原理

项目包自带webpack模块，会自动对项目进行打包，剔除代码中没用到的资源，假设assets里放了100个图片，代码中就用了10个，打包时会自动只打包10个，其中img的src中书写的图片路径会被认为是需要的图片，但是js代码中书写的图片路径默认会被识别为普通的字符串，而不被打包，必须用require方法引入这个图片

<img src="./assets/heros/Annie.jpg">
<img :src="annie">
<script>
  data(){
    return{
      annie:require('./assets/heros/Annie.png')
    }
  }
</script>

二、图片访问方式

在vue脚手架项目中，存放图片的位置有两大类：public与src

(一)、如果图片存在src下

在src下的图片用相对路径访问如在src/assets/下有001.png 002.png:

<img src="../assets/001.png">
<img src="@/assets/002.png">

@相当于src，从src向下寻找图片放在src目录下的图片，用相对路径来访问，当vue发现需要通过相对路径来寻找图片时，将会对该图片进行编译：对图片重命名：001.7987342.png，然后在打包时，将图片放入项目根目录下的/img文件夹中，最后修改img的src属性

<img src="/img/001.7987342.png">

脚手架对图片的编译有优化措施：对于足够小的图片，脚手架在编译图片时会把图片转成base64编码直接写入img的src属性

<img src="data:image/png:base64:xxfsdfxxx....">

使用了base64编码，将会在页面下载时，将图片数据直接下载到客户端，一起显示

（二）、如果图片存在public下

public下的图片，使用绝对路径（斜杠）开头直接访问，例如在public下有图片003.png 004.png，如下访问：

<img src="/003.png">
<img src="/004.png">

public中的资源可以用“/”直接访问，因为脚手架在打包时，将会把public下的所有静态资源原封不动的肤质到dist文件夹中，所以访问public下的图片时，可以直接用“/”访问，相当于直接访问dis目录下的静态资源

（三）、什么样的图片放assets?什么样的图片放public？

一般情况下项目中必须要显示的小图标、图片可以放入assets，其余都放public下，assets在src下，属于项目源代码的一部分

（四）、特殊情况：相对路径访问src下的图片，并且到动态设置路径时

如

<img src="../assets/001.png">

上述代码将会编译图片动态修改src:

<img :src="../asstes/001.png">

一旦给src加上冒号，vueloader将不会编译图片路径，将图片路径直接输出给src,如果希望手动编译，则需要调用require方法

<img :src="require(../assets/001.png)">

（五）、总结

public下资源用/直接访问 assets下资源用相对路径访问，../或@ 如果src需要动态设置，必要时添加require

Vue图片打包原理及图片访问方式