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

相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require
有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require，我倒着都能背出来......
emmm...乍一看好像说的很有道理啊，但是仔细一看，这句话说的到底是个啥？针对上面的回答，我不禁有如下几个疑问：

什么是静态资源？
为什么动态添加的src会被当做的静态的资源？
没有进行编译，是指为是什么没有被编译？
加上require为什么能正确的引入资源，是因为加上require就能编译了？

当我产生最后一个疑问的时候，发现上面的答案看似说了些啥，但好像又什么都没说...... 如果各位看官老爷也有如上几个疑问，那就让我给大家一一解惑
1.什么是静态资源与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。

静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。
动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。

其实上面的总结已经很清晰了。站在一个vue项目的角度，我们可以简单的理解为：
静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。比如assets目录下面的图片，视频，音频，字体文件，css样式表等。
动态资源就是需要发送请求获取到的资源。比如我们刷淘宝的时候，不同的商品信息是发送的专门的请求获取到的，就可以称之为动态资源。
2.为什么动态添加的src会被当做的静态的资源？回答这个问题之前，我们需要了解一下，浏览器是怎么能运行一个vue项目的。
我们知道浏览器打开一个网页，实际上运行的是html，css，js三种类型的文件。当我们本地启动一个vue项目的时候，实际上是先将vue项目进行打包，打包的过程就是将项目中的一个个vue文件转编译成html，css，js文件的过程，而后再在浏览器上运行的。
那动态添加的src如果我们没有使用require引入，最终会打包成什么样子呢，我带大家实验一波。

// vue文件中动态引入一张图片<template><div class="home"><!-- 通过v-bind引入资源的方式就称之为动态添加 --><img :src="'../assets/logo.png"" alt="logo"></div></template>//最终编译的结果(浏览器上运行的结果)//这张图片是无法被正确打开的<img src="https://www.huyubaike.com/assets/logo.png" alt="logo">

我们可以看出，动态添加的src最终会编译成一个静态的字符串地址。程序运行的时候，会按照这个地址去项目目录中引入资源。而去项目目录中引入资源的这种方式，就是将该资源当成了静态资源。所以这也就回答了我们的问题2 。
看到这里估计就有小伙伴疑惑了，这个最终被编译的地址有什么问题吗？我项目中的图片就是这个地址，为什么无法引入？别急，我们继续往下看。
3.没有进行编译，是指的是什么没有被编译？没有进行编译。这半句话，就听得很让人懵逼了。按照问题2我们知道这个动态引入的图片最终是被编译了，只是被编译之后无法正确的引入图片资源而已。所以这句话本来就是错的。针对于我们的标准答案，我在这里进行改写：
因为动态添加src被当做静态资源处理了，而被编译过后的静态路径无法正确的引入资源，所以要加上require