在appcelerator/titanium mobile中，当在webview中使用本地html时，如何从应用程序数据目录加载图像并引用

Question

在 web 视图中显示的本地 html 文件中，我希望能够从应用程序数据目录调用图像。我在我的 html 中尝试了几个 src 选项，但似乎都不起作用。

我正在从应用程序数据目录成功加载 html 文件，如下所示：

var win = Ti.UI.currentWindow;

var rootDir = Ti.Filesystem.getExternalStorageDirectory();
var webUrl = rootDir + 'index.html';

var webview =  Ti.UI.createWebView({
width:'100%',
height:'100%',
url:webUrl
});

win.add(presWebView)

虽然页面在 web 视图中正确打开，但所有图像 url 均不起作用。

<image src="appdata:///image.jpg"/>
<image src="app:///image.jpg"/>
<image src="file:///image.jpg"/>
<image src="appdata://image.jpg"/>
<image src="app://image.jpg"/>
<image src="app://image.jpg"/>

这个问题也延伸到链接，无论我如何尝试引用它们，webview 都会告诉我页面不会退出。

Answer 1

我已经解决了。

您必须获取 ApplicationDataDirectory oExternalStorageDirectory，
然后使用（文件对象的）.nativePath 属性，您可以动态获取相对路径。

var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory(), 'test/1.html'); enter 

mywebview = Ti.UI.createWebView({ backgroundColor: 'white', url: file.nativePath });

Answer 2

我已经管理了一个特定的解决方案，通过将 webview url 从基于其与外部存储目录的相对位置的地址更改为绝对路径，使图像和链接在我的本地 html 文件中正常工作：

var webUrl = "file:///mnt/sdcard/..."

var webview =  Ti.UI.createWebView({
width:'100%',
height:'100%',
url:webUrl
});

win.add(presWebView);

只要 url 是绝对路径 html 中的所有链接都可以是相对的，例如

显然，最好动态获取外部存储目录，因此如果有人知道一种方法可以在不破坏 html 中的链接的情况下执行此操作，我将很乐意听到。

Answer 3

在你的Android目录/tools中，有一个名为DDMS的小程序。如果您打开它，单击您的模拟器，然后在顶部菜单中单击“文件管理器”，您可以看到可以访问的所有路径

"file://"

。

例如：

var imgPath = "file://mnt/sdcard/uk.co.yourappid/test.jpg";

我现在刚刚在 WebView 中使用此功能：

Ti.App.addEventListener('snagr:plan:loadImage', function(e) {
            $('#plan-image').css({
                background: "url(" + e.path + ") top left no-repeat",
                width: e.width,
                height: e.height
            });
        });

希望这会有所帮助！