在 Adob​​e Air Flex4.5 中将 app:/ 图像加载到 HTMLLoader 中？

Question

我正在使用 Adob​​e AIR 构建一个应用程序，其中包含一个带有 mx:HTML 的浏览组件。此浏览器将用于加载外部内容（例如，可公开访问的网址，例如 http://google.com）外部内容加载后，我将 CSS 和 JS 注入 HTMLLoader 以为我的应用程序提供其他 UI 组件。

那部分工作得很好。我的JS代码是由WebKit执行的；我的 CSS 规则由 WebKit 使用。对于我使用 CSS 和 JS 创建的 UI 组件，我希望使用一些图像。到目前为止，我已经成功地通过 数据 URI 方案 在 HTMLLoader 中渲染图像，但这迫使我在 asset/ 文件夹中制作图像的 Base64 编码副本（添加到 CSS 规则）。

我希望能够使用 HTMLLoader 加载外部 URL，然后添加 CSS、JS 和图像以在同一 HTMLLoader 中创建 UI 组件。我知道 HTMLLoader 属性 placeLoadStringContentInApplicationSandbox，但如果我用它来将本地图像从我的资产/加载到 HTMLLoader 中，那么 IMG 标记的 HTML 内容会是什么样子，即如何引用图像？

关于如何将本地图像加载到 HTMLLoader 对象的内容中还有其他想法吗？

更新

我尝试了第一个评论者的想法，使用 src="app:/path/to/image.png" 但没有成功。

这就是我所做的：

<mx:HTML id="browser"/> 
<fx:Script>
<![CDATA[
browser.addEventListener(Event.COMPLETE,browserEventCompleteHandler);    
browser.htmlLoader.placeLoadStringContentInApplicationSandbox = true; // have set to true and false with no difference.
....initiate browser load....
private function browserEventCompleteHandler(event:Event):void 
{
    var img:* = browser.domWindow.document.createElement('IMG');
    img.src = "app:/assets/arrow_refresh.png";
    img.width="300";
    img.height="300";
    browser.domWindow.document.getElementsByTagName('body')[0].appendChild(img);
}
]]>
</fx:Script>

运行上面的代码，我看到 IMG 元素被添加到宽度和高度为 300px 的外部内容中，但 PNG 图像本身不渲染。只需查看 IMG 元素的一个空的 300 像素正方形即可。

最终更新

答案解决了我的问题，但做了一个更改。我使用 File 和 FileStream 类而不是 URLRequest 来加载 png。这就是我所做的：

var f:File = File.applicationDirectory.resolvePath("app:/assets/arrow_refresh.png");
var s:FileStream = new FileStream();
s.open(f, flash.filesystem.FileMode.READ);
var data:ByteArray = new ByteArray();
s.readBytes(data,0,s.bytesAvailable);
var b64Encoder : Base64Encoder = new Base64Encoder;
b64Encoder.encodeBytes(data);

Answer 1

为什么不在运行时以 Base 64 编码 img ？

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.html.HTMLLoader;
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.net.URLRequest;

    // Base64Encoder from as3corelib (https://github.com/mikechambers/as3corelib)
    import mx.utils.Base64Encoder;

    public class TestHtml extends Sprite
    {
        private var _htmlLoader : HTMLLoader = new HTMLLoader();

        private var _rawImgLoader : URLLoader = new URLLoader; 

        public function TestHtml()
        {
            super();

            _htmlLoader.width = stage.stageWidth;
            _htmlLoader.height = stage.stageHeight;

            // Load google page
            _htmlLoader.load(new URLRequest("http://www.google.fr"));
            _htmlLoader.addEventListener(Event.COMPLETE,   onEvent);

            // Load one image
            _rawImgLoader.dataFormat = URLLoaderDataFormat.BINARY;
            _rawImgLoader.addEventListener(Event.COMPLETE, onEvent);
            _rawImgLoader.load(new URLRequest("logo.png"));

            addChild(_htmlLoader);
        }

        private function onEvent(e:Event) : void
        {
            addImg();
        }

        private function addImg() : void
        {
            // Wait for img and html
            if(_htmlLoader.loaded && _rawImgLoader.data)
            {
                // Encode img
                var b64Encoder : Base64Encoder = new Base64Encoder;
                b64Encoder.encodeBytes(_rawImgLoader.data);

                var img:Object = _htmlLoader.window.document.createElement('IMG');
                img.src = "data:image/png;base64," + b64Encoder.flush();
                img.width="300";
                img.height="300";
                var body :Object = _htmlLoader.window.document.getElementsByTagName('div');
                body[0].appendChild(img);
            }
        }
    }
}

Answer 2

placeLoadStringContentInApplicationSandbox 不起作用，因为您的内容不是从字符串加载的，而是从外部网址加载的。并且远程内容被限制使用本地文件。如果您加载了 html 并将其手动设置为 htmlText 属性，它将成为本地内容，但这可能会出现问题（例如页面闪烁）。