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

Question

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

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

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

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

Answer 1

在 dialog.

的 content 属性中添加图片 html 标记

实例：

require([
  'dojo/domReady!'
], function() {
  require(["dijit/Dialog", "dijit/form/Button", "dojo/domReady!"], function(Dialog, Button) {
    var myDialog = new Dialog({
      title: "Programmatic Dialog Creation",
      style: "width: 300px"
    });

    var myButton = new Button({
      label: "Show me!",
      onClick: function() {
        myDialog.set("content", '<img class="lightbox-image" style="" src="https://placeimg.com/640/480/any">' + new Date() + "!");
        myDialog.show();
      }
    }, "progbutton");
  });
});

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />

<script>
  window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js">
</script>

<body class="claro">
  <p>When pressing this button the dialog will popup. Notice this time there is no DOM node with content for the dialog:</p>
  <button id="progbutton" type="button">Show me!</button>
</body>

Answer 2

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'});
        });

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

Display an image using dojo programmatically

javascript

ajax

dojo