vue-cli3环境上图片加载不出来经验小结

云栖号资讯：【 点击查看更多行业资讯

】

在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！

背景

本地完全OK，所有图片(svg,png等)都可以正常加载，环境上除了阿里G6的网格加载不出来其他正常。但是突然有一天，环境上除了阿里G6的网格，还有其他表示类型的图片(png)也都加载不出来。

分析

F12可以看到控制台报了XXXContent Security PolicyXXX之类的错误(公司电脑无法截图)，所以怀疑是CSP相关的原因，后来看了下代码，由于安全原因，后台给http都加了头信息Content-Security-Policy。

vue-cli3打包的时候，对图片打包进行了优化，默认小于10KB的图片(比如png，注意svg不会)转为base64。

base64就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求，从而优化http请求，保证页面加速渲染。

如果Content-Security-Policy: default-src 'self'，就导致了环境上的图片加载失败。

CSP策略

本质上是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。可以预防XSS攻击。

CSP的开启方法：

a.通过 HTTP 头信息的Content-Security-Policy的字段(后端)

b.通过网页的标签(前端)

如果Content-Security-Policy: default-src 'self'，会限制所有的外部资源(img,font,script,style等等)，都只能从当前域名加载

解决

a.CSP策略放开img

b.图片不做base64转换

拓展：url-loader 和 file-loader的区别

file-loader 返回的是图片的url

url-loader 可以通过limit属性对图片分情况处理，当图片小于limit（单位：byte）大小时转base64，大于limit时调用file-loader对图片进行处理。

【云栖号在线课堂】每天都有产品技术专家分享！

课程地址：

https://yqh.aliyun.com/zhibo

立即加入社群，与专家面对面，及时了解课程最新动态！

【云栖号在线课堂 社群】

https://c.tb.cn/F3.Z8gvnK

原文发布时间：2020-04-08

本文作者：refire_zj

本文来自：“

掘金

”，了解相关信息可以关注“掘金”