动态引入图片为什么要加require？

1.
 <img :src="require('../assets/logo.png')" alt="logo">

2.
 <div class="img-box" :style="{ backgroundImage: `url(require${i.imgSrc})`}">

答：因为动态添加:src 后的内容 会当做静态资源处理，而静态资源是会webpack编译的，当不加require的:src是不会编译:src里的地址，而assets里的图片经过wabpack编译为dist后，代码中的引入地址和资源地址在编译后已经对不上了。

1. 静态资源 & 动态资源

• 静态资源：一般客户端发送请求到web服务器，web服务器从本地内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。
  一般去项目目录中引入资源的这种方式，就是将该资源当成了静态资源 eg：assets目录下 字体文件，css样式表

• 动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。
  比如我们刷淘宝的时候，不同的商品信息是发送的专门的请求获取到的，就可以称之为动态资源。

2. why require？

所有的src文件夹下的文件都会被webpack编译，
而编译好的dist下已经不存在assets文件了，而不加require动态引入的地址，不会被编译，原来长啥样，编译后还长啥样，所以两者路径已经不匹配了

编译前的 src引用地址：../assets/logo.png
编译过后的 图片资源地址：服务器地址/img/logo.6c137b82.png

• webpack & require

vue最终是通过webpack打包，并且会在webpack配置文件中编写一系列打包规则。而webpack中的打包规则，针对的其实是一个一个模块，换而言之webpack只会对模块进行打包。那webpack怎么将图片当成一个模块呢，require。

当我们使用require方法引入一张图片的时候，webpack会将这张图片当成一个模块，并根据配置文件中的规则进行打包。我们可以将require当成一个桥梁，使用了require方法引入的资源，该资源就会当成模块并根据配置文件进行打包，并返回最终的打包结果

所以：

因为通过require方法拿到的文件地址，是资源文件编译过后的文件地址（dist下生成的文件地址或base64文件地址），因此可以找对应的文件，从而成功引入资源。

3. 不使用 :src 等动态方式，使用 <img src="./image.png"> 静态方式引入为什么不需要require？

引用vue-cli官方的一段原话

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径(不是@开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如<img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

eg: <img src="./image.png"> ./image.png地址串会被编译

4. 那为什么动态引入方式需要加require，才会被编译？

因为动态引入一张图片的时候，src后面的属性值，实际上是一个变量。webpack会根据v-bind指令去解析src后面的属性值。并不会通过reuqire引入资源路径。这也是为什么需要手动的添加require。

---

5. public下面的文件不会被编译，那我们使用静态路径去引入资源的时候，也会默认的使用require引入吗？

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们才不会错。最终编译产物在dist内，public和dist同一级。