Vue中的:src发生了什么？

• 案例一

<template>
  <img :src="'../assets/logo.png'" alt="four">
</template>

// 最终在浏览器 DOM 树中，img 标签会被编译成这样
<img src="../assets/logo.png" alt="four">  

• 案例二

<template>
  <img src="../assets/logo.png" alt="four">
</template>

<img data-v-0ceeb2b5="" src="data:image/png;base64,iVBOR..." alt="four">
// 或者如下
<img src="/img/persistence.png" alt="four">

默认情况下，src 目录下的所有目录都会被打包，并且生成新的文件夹，所以 assets 里面的图片被打包放在了新生成的 img 目录下，所以 /img/persistence.png能正确引入到资源

但是在 vue 中，对于 webpack 的打包规则设置了一下：小于 8k 的图片，不再放入新生成的 img 目录下，直接转成 base64 的地址，以减少对于服务器的请求

好，我们总结一下