webpack打包后图片问题

当我们启动一个服务的时候，会先去执行webpack编译，然后在进行页面渲染。webpack会根据我们的配置，将不同类型的文件通过对应的loader进行编译或转码或打包。

image.png

webpack处理图片时，它根据读到的后缀名来匹配到url-loader,根据引入的图片路径找到对应的图片，直接将图片资源编译成base64格式，然后在渲染的过程中，不会再次请求此路径，而是将刚刚编译出来的base64反编译成图片的形式进行显示。

image.png

image.png

但是，加入我们从服务器端拿到一个变量在页面中填充进去，那么webpack在编译时，这个变量并没有图片类后缀，就没法找到url-loader，也就不能进行base64转码，只是将变量名替换为变量值，但这时候，webpack已经不会再次编译，页面渲染过程，根据解析出来的相对路径去照图片就会找不到，因为打包之后的代码，不能够根据相对路径去找到对应的资源。

image.png

image.png

我们把服务器端返回的路径换成网络上的图片，这时候，就算webpack不把图片转码后进行存储，浏览器渲染页面的时候现去寻址，也是可以找到的，因为我们用的是绝对路径。

image.png

image.png