安卓Galaxy平板USB存储中HTML文件路径配置问题咨询

核心问题原因 #

安卓平板挂载USB时，系统对本地文件路径的识别规则和电脑不同，加上文件名空格、权限限制等因素，会导致相对路径失效。

具体解决步骤 #

• 先确认文件层级结构
  必须保证recipe.html和Pictures、Videos、Recipes文件夹在USB的同一根目录下，结构如下：

  USB根目录/
  ├─ recipe.html
  ├─ Pictures/
  │  └─ [图片文件]
  ├─ Videos/
  │  └─ [视频文件]
  └─ Recipes/
     └─ [食谱文件]
  

  如果文件夹嵌套层级错误，直接调整到同级即可。

• 修复文件名空格问题
  安卓系统对带空格的路径支持不稳定，建议把所有文件名和文件夹名里的空格替换成下划线_，比如把Simple Stovetop Macaroni and Cheese.jpg改成Simple_Stovetop_Macaroni_and_Cheese.jpg，同时同步修改HTML里的路径。

• 替换为安卓识别的绝对路径
  如果相对路径还是不行，直接使用USB在安卓系统中的挂载绝对路径：

  1. 打开平板自带的「我的文件」，进入USB存储，查看地址栏的路径（一般是/storage/XXXX-XXXX/，其中XXXX-XXXX是USB的UUID）
  2. 把HTML里的资源路径替换成绝对路径，示例：

     <img src="/storage/ABCD-1234/Pictures/Simple_Stovetop_Macaroni_and_Cheese.jpg" style="width:200px">
     

• 检查浏览器权限
  打开平板设置→应用→你用来打开HTML的浏览器（如Chrome、三星互联网）→权限，开启「存储」权限；同时在浏览器设置里确认开启「允许访问本地文件」选项。

修正后的代码示例 #

<div class="item1">
    <p class="Names">Simple Stovetop</p>
    <p class="Names"> Mac and Cheese</p>
    <a href="Simple_Stovetop_Macaroni_and_Cheese.html">
        <img src="Pictures/Simple_Stovetop_Macaroni_and_Cheese.jpg" style="width:200px">
    </a> 
    <div id="navcontainer">
        <ul>
            <li><a href="Videos/Simple_Stovetop_Macaroni_and_Cheese.mp4" target="_blank">Video</a></li>
            <li><a href="Recipes/Simple_Stovetop_Macaroni_and_Cheese_Recipe.pdf" target="_blank">Recipe</a></li>
        </ul>
    </div>
</div>

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