Vue中的`:src`发生了什么？

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 的地址，以减少对于服务器的请求

好，我们总结一下🙋

• 为什么案例一不行？

  它会认为绑定了一个变量，不会默认使用 require 引入，所以得到的地址不是正确的

• 为什么 require 或者 原始方法 可以？

  因为能够得到正确的地址，而且当使用 原始方法 的时候，遇见 src 等属性时，它会默认使用 require 引入

相关链接：

https://juejin.cn/post/7159921545144434718