安卓平板离线加载自研网页（HTML/CSS/JS）问题求助

针对JS加载图片离线无法显示的问题 #

• 检查图片路径：确保JS动态加载时用相对路径，不要用带http/https的绝对URL，也不要用根路径开头的格式（比如/images/xxx.png），改成相对于当前HTML文件的路径（比如./images/xxx.png或images/xxx.png）。
• 修正预加载逻辑：如果用Image()对象预加载，必须在onload事件触发后再把图片插入DOM，示例代码：

  const img = new Image();
  img.onload = function() {
    // 确认加载完成后再插入页面
    document.body.appendChild(img);
  };
  img.src = './images/your-img.png';
  

• 极端兜底方案：把小体积图片转成base64编码直接内嵌到JS或CSS中，彻底消除路径依赖。

针对安卓平板本地文件无法加载资源的问题 #

• 统一路径大小写：安卓文件系统严格区分大小写，检查所有资源文件名、路径的大小写是否和代码中的引用完全一致（比如代码写Images/xxx.png但实际文件是images/xxx.png就会加载失败）。
• 避免根路径引用：所有CSS、JS、图片的引用都用相对路径，不要用/css/style.css这类根路径格式，改成./css/style.css。
• 解除Chrome本地JS限制：安卓Chrome默认对本地文件的JS执行有严格限制，可尝试：
  1. 在Chrome地址栏输入chrome://flags/#allow-file-access-from-files，启用该选项后重启Chrome。
  2. 改用本地HTTP服务器访问：在安卓上安装简易HTTP服务器类APP，将文件目录设为服务器根目录，通过http://localhost:端口号访问，完全模拟在线环境，规避跨域和权限问题。
• 放弃Chrome“下载离线使用”功能：该功能仅保存单页HTML，不会完整下载所有依赖资源，直接复制整个文件目录才是正确的离线部署方式。

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