RN WebView无法加载项目级文件夹中图片的问题求助

首先咱们拆解下问题核心：你的WebView现在加载的是Android assets 目录里的HTML文件，而图片放在项目根目录的external/images下，这两个目录在Android的文件系统里不在同一个层级，所以原来的相对路径肯定找不到图片。iOS端也类似，需要确保图片被正确识别为资源，并且路径对应上。

Android端解决方案 #

Android的assets目录是独立的打包资源目录，和项目根目录的external文件夹没有直接层级关联，所以../../../../../external/images/这种相对路径完全无效。这里有两种靠谱的解决方式：

方式1：把图片移到assets目录下（推荐） #

把external/images里的所有图片复制到android/app/src/main/assets/webviews/images/目录下，然后修改HTML里的JS代码：

var marker = new google.maps.Marker({ 
  position: posicao, 
  icon: './images/' + icon.toString() + '_' + direction + '.png', 
  map: mapa 
});

这个路径是相对于map.html所在的webviews目录，WebView能直接读取assets里的图片。如果不想手动复制，可以在Android的build.gradle里加自动同步脚本，打包时自动复制图片：

android {
    // ...其他配置
    sourceSets {
        main {
            assets.srcDirs += file('../../../../external/images')
            // 此配置会把external/images的图片打包到assets/images目录下，HTML路径对应'./images/xxx.png'
        }
    }
}

方式2：用绝对路径访问设备存储 #

如果不想移动图片，可以把external/images里的图片复制到设备内部存储目录，再用file://绝对路径访问。但这种方式需要处理文件复制逻辑，还要申请存储权限，步骤繁琐，非特殊需求不推荐。

iOS端解决方案 #

iOS端WebView加载的是./external/widget/map.html，首先要确保external/images里的图片已经添加到Xcode项目中（右键Xcode项目 → Add Files to "YourProject"，选择external/images文件夹，勾选"Create groups"和"Add to targets"）。然后修改HTML里的图片相对路径：

var marker = new google.maps.Marker({ 
  position: posicao, 
  icon: '../images/' + icon.toString() + '_' + direction + '.png', 
  map: mapa 
});

因为map.html在external/widget/，图片在external/images/，用../images/就能向上一级找到目标目录。

关于是否必须放入Android res/iOS对应文件夹的问题 #

不是必须的。Android的res文件夹是存放应用原生资源（如drawable、mipmap）的地方，但WebView加载本地HTML时，读取assets目录的资源会更直接；iOS端只要把图片添加到Xcode项目的资源列表中，就能通过相对路径访问，无需放到特定资源文件夹。当然，把图片放到res/iOS资源目录也能通过原生方式获取路径，但对WebView来说，用assets/项目资源目录的相对路径会更简单高效。

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