Question

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

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

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

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

Answer 1

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

实例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

with Dialog（扩展ContentPane）：

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

使用Lightbox（需要Lightbox css，在内部使用LightboxDialog，扩展Dialog）：

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

使用LightboxDialog（idem Lightbox，公开LightboxDialog实例）：

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

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

2 个答案: