vue的引入图片的方式

web需要大量图片，图片来源大致分为这几个：

1. 静态的
2. 动态的

写法大致分为这几个：

1. 直接在img标签中书写
2. 在data等域中书写，然后动态改变 img

// 项目中的图片路径为
// src/assets/logo.png

 img 标签是通过 webpack 的 file-loader 处理过的，换句话说 img 标签的路径会被 webpack 转换，从而得到正确的引用。

如果是动态的 就是在data 域中

1.  通过improt 引用 2.通过require 方式

style 中引入图片

background: url(../../assets/images/entry-icon.png) 0 0 no-repeat; 

总结：

asserts 文件夹下的资源会被 webpack 处理（添加哈希值等等），导致直接引用无法找到文件。

public 文件夹下的资源不会被处理，可以直接通过路径引用。

结合之前的需求(动态与静态资源)，我总结了下面想法：

1. public 文件夹下存放前端需要的资源文件（如logo，动画需要图片等等）。为了正确使用，应该将该文件交给后端放入正确位置，从而得到正确引用。
2. 一种很常见的需求是后端发送json包，包内包含图片路径，这时其实完全是后端问题，后端应该保证给的图片路径能被正确引用，与 public, asserts 文件夹无关。
3. public, asserts 只是前端开发时使用的资源文件夹。一种需求是前端需要使用类似 mock.js等库进行后端数据模拟，为了得到正确的图片数据，应该将图片资源放入public中，并使用正确路径，在最后交付时删除测试文件。