从 JSON 属性加载 HTML img 元素的图像，而 URL 不能直接访问答案

【问题标题】：Load image for HTML img element from JSON property while URL not directly accessible从 JSON 属性加载 HTML img 元素的图像，而 URL 不能直接访问
【发布时间】：2012-09-25 17:33:25
【问题描述】：

好的，这个解释起来比较复杂，它解释了冗长的标题：在我的 Objective C 应用程序中，我生成了一个 JSON 字符串来保存我需要在 wikitude SDK 的 ARchitect 浏览器中绘制的对象的所有属性（据我所知，Wikitude SDK 只处理 JSON）通过：

NSString *javaScript = [self convertPoiModelToJson:self.poiData.pois];
NSString *javaScriptToCall = [NSString stringWithFormat:@"newData('%@')", javaScript];

我感兴趣的一个特定对象作为字符串存储在该 JSON 字符串中，它是图像的 URL。但是，此图像位于我们的网络服务器上的密码保护区域后面，应用程序会处理身份验证。

当我在 ARchitect 浏览器中时，问题就开始了，它基本上是一个 .html 文件，其中调用了特定的 wikitude javascript 函数来构建增强现实世界并将其显示在应用程序的 UIWebView 中。我想在作为基本 html div 容器的页脚弹出窗口中单击增强视图中的 POI 时显示该图像。所以现在我有一个指向网络服务器上图像资源的 URL，我无法直接访问

document.getElementById("thumb").src = jsonObject.thumbUrl;

由于需要身份验证，并且我成功加载该图像的唯一方法是通过 var poiImage = new AR.ImageResource(jsonObject[i].iconURL, {onError: errorLoadingImage}); 方法，但我只能在增强视图中显示它，而不能在页脚中显示它。

我尝试从网络中的其他图像或本地资源向视图中页脚部分的 img 元素提供静态字符串，没有出现类似问题：document.getElementById("thumb").src="marker.png";，它工作正常，图像也是在增强视图中正确加载。

我已阅读有关在 base64 中编码图像（我可以在应用程序的目标 c 部分中访问和下载）并将该字符串存储在附加 JSON 属性中以将其加载到 html img 元素的 src 属性中的内容<img src="data:image/png;base64,BASE&$_ENCODED_DATA"></img> 但这对于我试图完成的事情来说似乎是一个非常肮脏且过于不切实际的解决方法/hack。另外，我不知道开始阅读有关如何实现身份验证以访问网络服务器受保护区域中的图像的更好主意，还是开始实现丑陋的 base64 编码或继续寻找替代方案。

我不是在寻求解决方案，而是寻求建议，我还剩下哪些可能性可以访问该图像。由于我的想法已经用完了，因此感谢您提供任何帮助。

谢谢！

简短的总结：

图像可在目标 c 部分中访问和下载
图像可通过 wikitude SDK 的 AR.ImageResource 方法访问（但不是必需的）
无法通过 javascript 中的 url 直接访问图片，因为需要身份验证

（我希望我的问题是可以理解的，如果有什么不清楚的地方，请随时提出，特别是因为英语不是我的第一语言，用德语解释会更复杂..）

【问题讨论】：

标签： javascript html objective-c json wikitude

【解决方案1】：

您是否尝试过在 Objective-C / Cocoa 中下载图像，将其本地存储在您的 iOS 设备上，并通过 JSON 将图像的本地路径传递到您的 Architect World 中？

然后您可以使用您的 AR.ImageResouce 和您的 div 容器加载本地图像。

【讨论】：

这就是我最终所做的，因为它是最简单和最先进的方法，无需在网络服务器上提供公共场所来存储图像或再次验证或使用脏二进制流黑客甚至再次加载图像。 .

【解决方案2】：

好的，让我们考虑一下，因为它看起来很混乱。

如果我很好地理解了您的问题，那么所有关于您的 javascript 代码需要到达图像所在的 url，因为该位置需要某种验证才能访问而无法这样做。

在这种情况下，我会寻找移动图像到受限站点之外的地方。也许试图将它们从 Objective-C 部分保存到一个 public 可以通过 javascript 访问的地方。这可能很棘手，因为 I/O 操作可能会减慢您的代码执行速度...当然，您始终可以选择将这些图像移到 restricted 区域之外，但我认为这不可行因为你可以自己想出那个解决方案。

其他方式...如果您的环境配置允许（我担心问题上没有足够的信息）是尝试执行您的 javascript 部分（我想知道它是否包含在从网络服务器执行的网页中) 具有进入 restricted 区域权限的用户。当然，这可能完全是一个禁忌，具体取决于您的 javascript 部分的功能以及您的 restricted 区域为何受到验证的保护。

如果您不想移出文件，则暂时复制它们会导致性能问题和错误，并且不能通过 javascript 执行用户来模拟用户我担心您的独特选择是有效地尝试传递二进制流通过 JSON 字符串包含图像的数据...脏...

【讨论】：

您想知道 javascript 部分是否位于网络服务器上的网页上，这让我想到了将其放在受限区域内的服务器上以允许访问图像，因为现在它只是静态的html文件..会让你更新
可能您的用户需要使用用户名/密码才能访问服务器上的 html 文件，除非您启用匿名访问或您的用户已经登录到受限区域。

【解决方案3】：

看起来 wikitude 维护 2 个浏览器上下文：加载 HTML 的主机浏览器和由 UIWebView 实例表示的嵌入式浏览器类对象（或 iframe 或代理服务器）。

其中只有一个（从您的讨论中不清楚）拥有访问您的图像的用户/通行证。您将需要调用某些东西来重复身份验证步骤或将凭据传输到其他上下文。

【讨论】：