vue中动态引进图片为什么要是require， 你不知道的那些事

上图便是vue中webpack默许的图片打包规矩。设置 type: ‘asset’，默许的，关于小于8k的图片，会将图片转成base64 直接刺进图片，不会再在dist目录生成新图片。关于大于8k的图片，会打包进dist目录，之后将新图片地址回来给src。

而我在上述测验中运用的图片，是vue-cli自带的一张logo图片，巨细是6.69k。依照默许的打包规矩，是会转成base64，嵌入图片中的。所以为了讲述便利，我在vue.config.js中修改了其默许的装备，装备如下：

module.exports = {
    // 运用configureWebpack目标，下面能够直接依照webpack中的写法进行编写
    // 编写的内容，终究会被webpack-merge插件合并到webpack.config.js主装备文件中
  configureWebpack: { 
    module: {
      rules: [
        {
          test: /.(png|jpe?g|gif|webp|avif)(?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
             // 这儿我将默许的巨细约束改成6k。
              // 当图片小于6k时分，运用base64引进图片；大于6k时，打包到dist目录下再进行引进
              maxSize: 1024 * 6
            }
          }
        }
      ]
    }
  }
}

那上面说了这么多，和require有啥联系，自然是有滴。

咱们现在知道vue终究是经过webpack打包，而且会在webpack装备文件中编写一系列打包规矩。而webpack中的打包规矩，针对的其实是一个一个模块，换而言之webpack只会对模块进行打包。那webpack怎样将图片当成一个模块呢，这就要用到咱们的正主require。

当咱们运用require办法引进一张图片的时分，webpack会将这张图片当成一个模块，并依据装备文件中的规矩进行打包。咱们能够将require当成一个桥梁，运用了require办法引进的资源，该资源就会当成模块并依据装备文件进行打包，并回来终究的打包成果。

回到问题4.2：调用require办法引进一张图片之后发生了什么

1.假如这张图片小于项目中设置的资源约束巨细，则会回来图片的base64刺进到require办法的调用途

2.假如这张图片大于项目中设置的资源约束巨细，则会将这个图片编译成一个新的图片资源。require办法回来新的图片资源途径及文件名

回到问题4：为什么加上require能正确的引进资源

由于经过require办法拿到的文件地址，是资源文件编译往后的文件地址（dist下生成的文件或base64文件），因而能够找对应的文件，然后成功引进资源。

答案便是这么简略，来验证一波

// vue文件中运用require动态的引进一张图片
<template>
  <div class="home">
      <!-- 运用require动态引进图片 -->
      <img :src="require('../assets/logo.png')" alt="logo">
  </div>
</template>
//终究编译的成果
//这张图片是能够被正确翻开的
<img src="/img/logo.6c137b82.png" alt="logo">

vue中动态引进图片为什么要是require， 你不知道的那些事

有问题吗，没有问题。到这儿，无妨再对咱们的标准答案进行一次优化：

由于动态增加的src，编译往后的文件地址和被编译往后的资源文件地址不一致，然后无法正确引进资源。而运用require，回来的便是资源文件被编译后的文件地址，然后能够正确的引进资源

看到这，估量还是有一些小伙伴有一些疑问，我再扩展一波：

6. 问题3中，静态的引进一张图片，没有运用require，为什么回来的依然是编译往后的文件地址？

答：在webpack编译的vue文件的时分，遇见src等特点会默许的运用require引进资源途径。引证vue-cli官方的一段原话

当你在 JavaScript、CSS 或*.vue文件中运用相对途径 (有必要以.最初) 引证一个静态资源时，该资源将会被包括进入 webpack 的依靠图中。在其编译过程中，所有诸如<img src="https://juejin.im/post/7159921545144434718/...">、background: url(...)和 CSS@import的资源 URL都会被解析为一个模块依靠。

例如，url(./image.png)会被翻译为require('./image.png')，而：

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

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

7. 依照问题6中所说，那么动态增加src的时分也会运用require引进，为什么src编译往后的地址，与图片资源编译往后的资源地址不一致

答：由于动态引进一张图片的时分，src后边的特点值，实际上是一个变量。webpack会依据v-bind指令去解析src后边的特点值。并不会经过reuqire引进资源途径。这也是为什么需求手动的增加require。

8.听说public下面的文件不会被编译，那咱们运用静态途径去引进资源的时分，也会默许的运用require引进吗？

官方的原文是这姿态的：

任何放置在public文件夹的静态资源都会被简略的仿制，而不经过 webpack。你需求经过绝对途径来引证它们。

答：不会，运用require引进资源的条件的该资源是webpack解析的模块，而public下的文件压根就不会走编译，也就不会运用到require。

9.为什么运用public下的资源必定要绝对途径

答：由于尽管public文件不会被编译，可是src下的文件都会被编译。由于引进的是public下的资源，不会走require，会直接回来代码中的定义的文件地址，该地址无法在编译后的文件目录（dist目录）下找到对应的文件，会导致引进资源失利。

10.上文件中说到的webpack，为什么引进资源的时分要有base64和打包到dist目录下两种的办法，悉数打包到的dist目录下，他不香吗？

答：为了削减http恳求。页面中经过途径引进的图片，实际上都会向服务器发送一个恳求拿到这张图片。关于资源较小的文件，设置成base64，既能够削减恳求，也不会影响到页面的加载功能。

以上便是今日的悉数内容啦，谢谢各位看官老爷的观看。欠好的当地，还请包容。不对的当地，还请纠正。

  • 参阅链接：cli.vuejs.org/zh/
  • 参阅链接：wjhsh.net/vickylinj-p…