无法使用 JavaScript 文件中文档目录中的图像

Posted 2023-03-08

【中文标题】无法使用 JavaScript 文件中文档目录中的图像

【英文标题】：Unable to use images from document directory in JavaScript file

【发布时间】：2015-05-14 07:11:31

【问题描述】：

我将从服务器获取的用户特定图像存储在document directory 中。然后我想在某些引脚（在引脚 InfoBox 内）的 bing 地图上显示这些图像。我正在使用 javascript 动态加载图像。但是地图上没有显示图像。

我将图像设置为infoBox 之类的 html 内容，

pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="file:///var/mobile/Containers/Data/Application/395E5EED-2FB4-4505-861E-2DA9AB96433B/Documents/my_image.jpg/"/>'+pin.Title+'</div></div>');

如果我使用任何远程文件并通过http protocol 访问它，它将起作用，

pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="http://a.abcd.com/static/images/zoom/magnifying-glass.png" />'+pin.Title+'</div></div>');

我不知道为什么它没有拍摄保存在我的文档目录中的图像。

请帮我解决这个问题。

【问题讨论】：

您是否尝试过使用 localhost 目录路径示例更改 src URL：src="localhost:port/var/mobile/Containers/Data/Application/395E5EED-2FB4-4505-861E-2DA9AB96433B/Documents/my_image.jpg/"

@anusha-k 我觉得您缺少 1 个正斜杠和一个额外的斜杠。更改为：pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="file:////var/mobile/Containers/Data/Application/395E5EED-2FB4-4505-861E-2DA9AB96433B/Documents/my_image.jpg"/>'+pin.Title+'</div></div>')。此示例仅在图像服务页面也从 file:/// 位置打开时才有效。当服务页面从 url（例如foo.com）打开时，这将永远无法正常工作。

@tiblu 我不明白。我的 .js 文件位于应用程序包中并动态加载。当接收到所需的位置信息时，使用图像路径（位于文档目录中）调用 .js 文件中的方法。这有什么问题吗？

@anusha-k 尝试上面的建议来修复图像源。我添加了额外的通知以防万一。如果是应用程序包，我想应该没问题。但我缺乏使用捆绑包的经验。

@anusha-k 抱歉，现在我想起来了，也许 file:/// 被禁用是有原因的。如果允许，您可以引用任何其他捆绑文件。很抱歉在这里长篇大论，但这可能是相关的 - ***.com/questions/747407/…

【参考方案1】：

我根据@tiblu 的评论解决了这个问题。

JavaScript file and images should be in same path.

但我无法将图像写入捆绑包，因为这些图像是在运行时从服务器下载的。所以我在应用程序启动期间将 JavaScript 文件复制到 documentDirectory 以处理图像。然后我们就可以直接通过图片的名字直接访问图片，不需要指定完整路径。

pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="my_image.jpg"/>'+pin.Title+'</div></div>');