Question

我想显示存储在“appendReturnedImages（data）”函数中的图像。但我得到错误，它无法显示图像。图像格式应该遵循我的HTML。

HTML：

<div class="col-md-5 single-top">   
    <ul id="etalage">

        <li>
            <img class="etalage_thumb_image img-responsive" src="images/si1.jpg" alt="" >
            <img class="etalage_source_image img-responsive" src="images/s2.jpg" alt="" >
        </li>
        <li>
            <img class="etalage_thumb_image img-responsive" src="images/si2.jpg" alt=""  >

        </li>
        <li>
            <img class="etalage_thumb_image img-responsive" src="images/si3.jpg"  alt="" >

        </li>
    </ul>

</div>

的JavaScript

 function appendReturnedImages(data) {


      var $html = $();

        $.each(data.images, function(index, element) {

       $html = $html.add($("<img/>", {

    height: 200,

    //width: 200, // uncomment this if you need to set width as well

    css: {

        'max-width': 200

    },

    src: element
     }));

$("#etalage").append($html);    
        });


          }

设置高度和宽度的Javascript部分

$('#etalage').etalage({
                thumb_image_width: 300,
                thumb_image_height: 400,
                source_image_width: 900,
                source_image_height: 1200,
                show_hint: true,
                click_callback: function(image_anchor, instance_id){
                    //alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
                }
            });

Answer 1

您可以尝试创建ul元素并将图片附加到该元素，然后将function appendReturnedImages(data) { var $html = $(); $.each(data.images, function(index, element) { $html = $html.add($("<img/>", { height: 200, //width: 200, // uncomment this if you need to set width as well css: { 'max-width': 200 }, src: element })); $("#etalage").append($('<li/>').append($html)); }); }元素附加到li。

function appendReturnedImages(data) {
  var $html = $();
    $.each(data.images, function(index, element) {
   $html = $html.add($("<img/>", {
   height: 200,
//width: 200, // uncomment this if you need to set width as well
   css: {
    'max-width': 200
   },
   src: element
  }));
    var $li = $('<li/>');
    $li.append($html[index]);
    $("#etalage").append($li);
    });
  }

修改

我添加了一个用于为每个图片添加<message id="224K2-7" to="testfirzan@sushant" type="chat"> <body>hi</body> <custom xmlns="jabber2:x2:oob2"> <url>URL</url> <desc>Description</desc> </custom> </message>元素的编辑

System.out(734): EmbeddedExtensionProvider <message id="224K2-7" to="testfirzan@sushant" from="testsushant@sushant/Smack" type="chat"> <body>hi</body> <custom xmlns="jabber2:x2:oob2"></custom> </message> File Extension description:(734): <custom xmlns="jabber2:x2:oob2"></custom>

如何使用jquery

1 个答案: