同服务器姊妹站点图片桌面端显示正常移动端无法加载求助

问题原因与解决方案 #

本地路径调用失效说明

你使用的服务器文件系统路径 /home/servernameexample/public_html/images/img.jpg 本身无法被客户端浏览器识别，该路径仅在服务器内部可读，对外提供访问必须使用HTTP/HTTPS协议的网络路径，因此该调用方式不生效属于正常情况。

移动端图片加载失败排查与解决

桌面端正常、移动端加载失败通常是移动端浏览器的安全/兼容性校验规则比桌面端更严格导致，可按以下顺序排查：

• 跨域资源共享（CORS）配置问题
  即使两个站点部署在同一服务器，只要域名不同就属于跨域场景，部分移动端浏览器对跨域静态资源的校验要求更高。你需要在图片所属的姊妹站点服务端添加CORS规则，允许你的主站域名访问图片资源。
  Nginx配置示例（添加到姊妹站点的server配置块）：

  location ~* \.(jpg|jpeg|png|gif|webp)$ {
      add_header Access-Control-Allow-Origin "https://替换为你的主站域名";
      add_header Access-Control-Allow-Methods "GET, OPTIONS";
      expires 30d;
  }
  

  Apache配置示例（添加到姊妹站点站点根目录的.htaccess文件）：

  <FilesMatch "\.(jpg|jpeg|png|gif|webp)$">
      Header set Access-Control-Allow-Origin "https://替换为你的主站域名"
  </FilesMatch>
  

• SSL证书兼容性问题
  移动端对SSL证书的校验规则更严格，如果姊妹站点的SSL证书存在缺少中间证书、证书过期、属于自签证书等问题，桌面端可能因为缓存或兼容性策略正常加载，移动端会直接拦截资源。你可以直接用移动端浏览器访问图片的绝对路径，确认是否存在证书不安全提示。
• 防盗链或User-Agent拦截问题
  检查姊妹站点的防盗链配置，确认你的主站域名已加入静态资源访问白名单，部分防盗链规则会对移动端携带的特殊Referer格式产生误拦截。同时确认服务端没有配置针对移动端User-Agent的访问限制，若有则移除图片目录的相关限制。
• 图片格式兼容性问题
  若你使用的是WebP、AVIF等新型图片格式，旧版本移动端Safari/Chrome对这类格式的支持存在缺陷，可将测试图片转换为通用JPG/PNG格式后重新测试加载情况。

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