一、问题描述
昨天测试小伙伴提了一个特殊的bug，在安卓vivo手机浏览器上访问网页，网页的图片按钮和录播图一闪而过后便消失不见：
二、问题排查
项目采用Nuxt框架，排查的方向大致如下：
1.其它手机浏览器是否有复现：
经测试，其它手机自带的vivo浏览器正常，vivo手机自带浏览器无法显示，但下载chrome浏览器后测试正常。
2.如何在vivo测试机自带的vivo浏览器上复现：
（1）尝试用vivo测试机通过数据线连接电脑chrome浏览器进行联调：失败。
（2）首先在本地搭建nuxt环境，运行项目，将vivo手机与开发电脑连接同一个局域网，最后用vivo手机自带的vivo浏览器访问电脑启动的nuxt服务：访问正常，未复现。
（3）本地构建正式环境的产物，并通过pm2运行，最后用vivo手机自带的vivo浏览器访问：访问正常，未复现。
（4）下载正式环境的部署包，并通过pm2运行，最后用vivo手机自带的vivo浏览器访问：访问正常，未复现。
至此，无法获取正式环境在vivo浏览器的报错信息。但又不能直接在正式环境上开启vconsole进行调试，于是尝试使用nginx转发本地请求，对请求内容进行修改，插入vconsole脚本进行调试：
（5）nginx+vconsole开启正式环境网页调试：
# nginx.conf 配置server {listen 3000;server_name localhost;location /{proxy_pass https://xxx.xxx.com;# 设置代理头 proxy_set_header Host xxx.xxx.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 禁用响应压缩 proxy_set_header Accept-Encoding ""; # 禁用gzip，以确保sub_filter能工作 # 开启sub_filter功能 sub_filter_once off; # 允许多次替换 sub_filter '</head>' '<script src="https://xxx.xxx.com/js/vconsole.js"></script><script>new VConsole();</script></head>'; # 替换内容 # 替换域名sub_filter 'https://xxx.xxx.com' 'http://192.168.xx.xx:3000';}}
经过vconsole查看，未发现任何报错信息。本地转发访问正式环境，也能正常显示。
综合上述结果，大胆猜测，图片未显示应该与网页域名有关。
再结合网页图片的特征（父容器都采用fixed定位）而有些手机浏览器会针对某些域名开启广告过滤功能，因此有可能被判定为广告。
于是找到vivo浏览器的广告拦截，并将其关闭后，该问题得以解决。
