Nuxt/VueJS页面WiFi下渲染正常，4G/5G移动设备图片加载失败如何修复？

问题根因与解决方案 #

路径适配问题

当前所有图片使用相对路径声明，结合配置的router.base: './'与build.publicPath固定为远程域名，蜂窝网络下如果运营商存在DNS劫持、路径重写策略，会导致相对路径解析异常，WiFi环境下无对应策略所以加载正常。
修正方案：将所有图片路径替换为完整绝对路径，格式为https://你的图片服务域名/xxx.jpg，完全避免路径解析偏差。

运营商透明代理干扰

国内蜂窝网络普遍存在运营商透明代理机制，会自动对未指定缓存规则的图片资源进行压缩、转码甚至拦截，跨域资源的代理拦截概率更高。
修正方案：给图片服务的响应头添加Cache-Control: no-transform，强制要求运营商不对图片资源做任何修改。

冗余代码清理

现有mounted钩子中的this.projects = this.projects逻辑无实际作用，不会触发响应式更新，直接删除即可。
hover事件仅绑定在PC端逻辑中，移动端不会触发，该逻辑和蜂窝网络下加载异常无关。

跨域资源优化

后续上线前恢复CORS配置的同时，给所有<img>标签添加crossorigin="anonymous"属性，避免跨域资源的缓存冲突。如果仍存在蜂窝网络加载异常，可将图片资源迁移到HTTPS CDN服务，CDN默认自带防劫持配置，稳定性远高于自建图片服务。

额外开发实践建议 #

• 纯CSR静态站点的场景下，无需使用nuxt-user-agent插件判断设备类型，可直接通过前端原生APInavigator.userAgent判断，或用CSS媒体查询做适配，减少不必要的依赖引入
• 给图片标签添加loading="lazy"懒加载属性，可大幅降低移动端首屏资源加载压力
• 如果后续有SEO需求，可开启Nuxt的SSG/SSR模式，静态生成页面内容对搜索引擎更友好

内容的提问来源于stack exchange，提问作者Isaiah Y