最近有一个线上抽奖的H5项目，为防止大量用户同时访问服务器而发生页面崩溃问题，前端尽量减少页面图片对服务器的请求，准备将页面中的图片都放到阿里云的oss中并购买cdn加速服务，减少服务器处理请求的压力。
但是将图片路径换成网络图片路径后，页面标签的图片和css中的背景图片都报403错误，单独将图片路径复制在浏览器中，却可以正常打开。下面说一下解决办法：
解决1：img标签中的图片显示问题
在index.html中添加：
<meta name="referrer" content="no-referrer">
后，img标签中的图片可以正常显示了。具体原因可以搜索 Referrer的作用
解决2：css中的图片显示问题
由于css中的图片主要都是背景图片，比如
background: url(https://cdn.xxx.com/lottery/bg.jpg) no-repeat bottom center;
background-size: cover;
- 注意：url()中的图片路径不要加"
然后，在阿里云oss管理中找到存放图片的库，找到 数据安全>防盗链，点击设置
添加两个白名单，第一个是项目的本地访问路径，用于本地调试用；第二个是线上域名，就是你项目上线后的域名。文章来源：https://www.toymoban.com/news/detail-466287.html
这样，页面中的图片都可以正常显示了。文章来源地址https://www.toymoban.com/news/detail-466287.html
到了这里，关于vue 在页面中使用阿里云oss网络图片，解决图片不显示的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
