vue动态引入图片为什么需要require

动态、静态资源

• 从前端vue的角度来看，

  • 动态资源：需要发送请求获取的资源

  • 静态资源：直接存放在项目中的资源，不需要发送专门的请求获取，如asset目录下的文件、图片、视频、css样式表

• 从后端node的角度来说

  • 动态资源：内容经常更新的资源，如百度首页，网易首页，京东搜索列表页面等。因为这些首页有推荐内容，这些推荐内容需要经常改变。

  • 内容长时间不发生改变的资源（针对生产环境，不是开发环境），例如图片、视频、CSS文件、JS文件、HTML文件，字体文件等。

    • 路由规则是针对动态资源的

    • 静态资源通过如express等框架托管，不需要写规则，用户自己输入对应的路径就可以跳转

vue动态引入的src

• vue项目运行大概流程：

  • 将vue项目进行打包，将项目中的一个个vue文件转编译成html，css，js文件

  • 而后再在浏览器上运行

• 动态引入：使用v-bind的方式引入资源

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

• 动态添加的src最终会编译成一个静态的字符串地址，程序运行的时候，会按照这个地址去项目目录中引入资源。而被编译过后的静态路径无法正确的引入资源。

  但是vue打包之后的这个静态资源一般就不叫这个名字了，所以找不到对应的资源。

  图片资源打包后一般名字会变为含有哈希值的新名字。

动态引入require作用

• require作用：require方法的返回值是打包后的文件地址

• 调用require方法引入一张图片之后发生了什么

  • 如果这张图片小于项目中设置的资源限制大小，则会返回图片的base64插入到require方法的调用处

  • 如果这张图片大于项目中设置的资源限制大小，则会将这个图片编译成一个新的图片资源。require方法返回新的图片资源路径及文件名

为什么静态引入不需要使用require

• 原因：在webpack编译的vue文件的时候，遇见src等属性会默认的使用require引入资源路径。

为什么动态引入要自己写require

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

简单来说，变量的优先级高于require了。

参考文章

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