以編程方式使用dojo顯示圖像

我試圖以編程方式使用dojo顯示圖像。我試過「dijit/Dialog」和「dojox/image/Lightbox」。當我使用對話框時，圖像對話框顯示一些字符而不是圖像。當我使用燈箱時，圖像總是顯示第二次。以編程方式使用dojo顯示圖像

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

上面的代碼只顯示一些字符。如果我給一個圖像的相對路徑，結果是一樣的。

隨着燈箱，如果它的相對路徑，然後圖像顯示。但隨着圖像流它顯示在第二次點擊。

來源

2017-09-06 coder247

您是否嘗試設置內容？ –

燈箱假定該文件是一個圖像，從而增加了在內部的<img />標籤href屬性，而對話框沒有，因此，使用內容的需求屬性，包括手動改爲<img />標籤。根據您想達到什麼樣的，你有幾種選擇（增加的複雜性/ fancyness）：

用的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 css，使用擴展Dialog的LightboxDialog）：

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

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

來源

2017-09-07 10:12:32

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

來源

2017-09-06 19:32:31 GibboK

以編程方式使用dojo顯示圖像

回答

相關問題