6、生产环境下三类图片的处理

图片处理

在开发环境下，我们的图片直接引用路径，配一个file-loader、url-loader就可以了，但是在生产环境下，由于文件打包产生到一个目录下，需要对图片进行打包，并且路径也有所改变，所以不能直接引用路径，会找不到图片，所以需要进行一定的处理

目的：webpack打包我们的图片

图片引入的方式

1. 在js中来引入图片

   1. 错误的写法：

   let image = new Image();
   image.src = './logo.png';//这种写法代表一个普通字符串，打包后也会被认为是普通字符串，而不是图片地址
   document.body.appendChild(image);
   

   上面的方式是无法打包图片的，自然也就无法找到图片

   2. 正确的写法：

   import logo from './logo.png';//把图片引入，返回的结果是一个新的图片地址
   let image = new Image();
   image.src = logo;
   document.body.appendChild(image);
   

   当然，如果光是这样，在你npm run dev的时候，会报错，告诉你需要安装一个合适的loader，那么你就需要安装一个file-loader

       npm i file-loader -D
       
       //在webpack.config.js中配置file-loader
       rules:[
   		{
   			test:/\.(png|jpg|gif)$/,
   			use:'file-loader'
   		}
   	]
   

   这样就OK了

2. 在css中引入，比如background

   在css文件中引入，只需要使用file-loader即可，因为css-loader会把路径转换成require的形式，详见下面代码注释

       npm i file-loader -D
       
       //在webpack.config.js中配置file-loader
       rules:[
   		{
   			test:/\.(png|jpg|gif)$/,
   			use:'file-loader'
   		}
   	]
   	
   	//在css文件中
       body{
       	background:pink;
       	transform: rotate(45deg);
       	background:url('./logo.png');//这种是默认支持的,因为我们使用了css-loader，css-loader会把这个路径转换成url(require('./logo.png'))
       }
   

3. 在html中img引入

   	<img src="./logo.png">
   <!-- 在html打包后，这个路径是一个字符串，不会解析成图片，所以存在问题。需要使用html-withimg-loader来解决,这个loader帮助我们编译html并解析图片  -->
   

   在html打包后，这个路径是一个字符串，不会解析成图片，所以存在问题。需要使用html-withimg-loader来解决,这个loader帮助我们编译html并解析图片

   npm i html-withimg-loader -D
   //在weboack.config.js中配置
   rules:[
   	{
   		test:/\.html$/,
   		use:'html-withimg-loader'
   	}
   ]
   

   这样就能解析html中的img标签引入的图片了

关键问题必须要做：

当有些图片很小的时候，我们并不需要打包编译，而是转成base64的形式，那么这个时候就需要这么改造：

1. file-loader与url-loader配合使用：做一个限制，当我们的图片，小于200K的时候，用base64来转换;否则用file-loader来产生真实的图片(200K是可以自己定的)

rules:[
			{
				test:/\.(png|jpg|gif)$/,
				//做一个限制，当我们的图片，小于200K的时候，用base64来转换
				//否则用file-loader来产生真实的图片
				//为啥转成base64，因为转成base64之后，就不会去发送http请求了，然后base64的大小大概是原文件的1/3
				use:{
					loader:'url-loader',
					options:{
						limit:200*1024//200k，小于200k使用base64来转换
					}
				}
			}
]

2. 为啥要转成base64：

因为转成base64之后，就不会去发送http请求了，然后base64的大小大概是原文件的1/3