javascript - 以编程方式使用 dojo 显示图像

Question

我正在尝试以编程方式使用 dojo 显示图像。我试过“dijit/Dialog”和“dojox/image/Lightbox”。 当我使用对话框时，图像对话框显示一些字符而不是图像。 当我使用灯箱时，图像总是显示第二次。

imageDialog = new Dialog({
  title:  "my image",
  preload: false,
  href: "/ajax/fileStreamer"
});
imageDialog.show();

上面的代码只显示了一些字符。如果我给出图像的相对路径，结果是相同的。

对于 Lightbox，如果它是相对路径，则显示图像。但是对于图像流，它会在第二次点击时显示。

Answer 1

Lightbox 假定文件是图像，因此在内部添加 <img />标记到 href 属性，而 Dialog 没有，因此需要使用内容属性，包括手动 <img />标签代替。根据您希望实现的目标，您有多种选择(增加复杂性/花哨性):

使用 ContentPane:

        require(['dijit/layout/ContentPane'], function (ContentPane) {
            var theImage = new ContentPane({content: '<img  src="yourimageurl"/>'}, 'theImage');
            theImage.startup();
        });

使用对话框(扩展 ContentPane):

        require(['dijit/Dialog'], function (Dialog) {
            var theImage = new Dialog({title: 'the image', content: '<img  src="yourimageurl"/>'});
            theImage.startup();
            theImage.show();
        });

使用 Lightbox(需要 Lightbox css，在内部使用扩展 Dialog 的 LightboxDialog):

        require(['dojox/image/Lightbox'], function (Lightbox) {
            var theImage = new Lightbox({title: 'the image', href: 'yourimageurl'});
            theImage.startup();
            theImage.show();
        });

使用 LightboxDialog(同上 Lightbox，公开 LightboxDialog 实例):

        require(['dojox/image/Lightbox'], function (Lightbox) {
            var theDialog = new dojox.image.LightboxDialog({});
            theDialog.startup();
            theDialog.show({title: 'the image', href: 'yourimageurl'});
        });