今天遇到一个vue2+webpack的项目，遇到了一个:src动态渲染图片资源,路径没问题但是找不到图片资源。
代码写法：
<span @click="togglePlay"><img
:src="isPlaying ? '../../assets/image/操作-停止-黑@2x.png' : '../../assets/image/操作-开始-蓝@2x.png'"></span>
F12显示信息
最后解决方法:动态图片路径用require
<span @click="togglePlay"><img
:src="require(isPlaying ? '../../assets/image/操作-停止-黑@2x.png' : '../../assets/image/操作-开始-蓝@2x.png')"></span>
这里是因为动态的src被当成静态处理了
四个疑问
1.什么是静态资源？
2.为什么动态添加的src会被当做的静态的资源？
3.为什么最后的图片路径是data:image/........
4.加上require为什么能正确的引入资源
- 1
静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。
动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。
静态资源一般都是设计好的html页面，而动态资源依靠设计好的程序来实现按照需求的动态响应
- 2
浏览器打开一个网页，实际上运行的是html，css，js三种类型的文件。当我们本地启动一个vue项目的时候，实际上是先将vue项目进行打包，打包的过程就是将项目中的一个个vue文件转编译成html，css，js文件的过程，而后再在浏览器上运行的。
动态添加的会被编译成一个静态的字符串地址
- 3
这是因为webpack会将资源打包
webpack会将大小小于8k的图片自动以一种base64的形式去引入图片,所以有些图片编译出来是一种base64的格式,有一些是img/111.png这样子
那么webpack为什么这么做,优点又是什么
base64其实就是一种二进制编码格式
优点
- 减少HTTP请求数量
每次加载图片时，浏览器都会发起一个单独的HTTP请求。通过将小图片转换为base64编码直接嵌入到代码中，可以减少HTTP请求的数量，从而提高页面加载速度。
2.http缓存
当图片作为base64编码嵌入到CSS或JavaScript文件中时，这些文件可以通过HTTP缓存机制缓存，从而避免重复下载。
但是也有缺点,这种方法只适用小体积的图片,否则得不偿失
因为图片转为base64格式时对应的数据体积会增加大约33%.
- 4
当我们使用require方法引入一张图片的时候，webpack会将这张图片当成一个模块，并根据配置文件中的规则进行打包。我使用了require方法引入的资源，该资源就会当成模块并根据配置文件进行打包，并返回最终的打包结果。
