如何在JQuery中显示从函数到div的图像

Question

I have extracted the images from CRM and I get all the images but now I want to show all the images in div using jquery. 我已经从CRM中提取了图像，并且得到了所有图像，但是现在我想使用jquery在div中显示所有图像。 I want that a new div is created and all these images are appended to that div. 我希望创建一个新的div，并将所有这些图像添加到该div。

var req = new XMLHttpRequest();
req.open("GET", parent.Xrm.Page.context.getClientUrl() + "/XRMServices/2011/OrganizationData.svc/ds_picturemanagerSet?$select=ds_ControlName,ds_entity,ds_ImageASSCI,ds_IsDefault,ds_MediaType,ds_picturemanagerId,ds_RecordGUID", true);
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = function() {
  if (this.readyState === 4) {
    this.onreadystatechange = null;
    if (this.status === 200) {
      debugger
      var returned = JSON.parse(this.responseText).d;
      var results = returned.results;
      for (var i = 0; i < results.length; i++) {
        var ds_ControlName = results[i].ds_ControlName;
        var ds_entity = results[i].ds_entity;
        var ds_ImageASSCI = results[i].ds_ImageASSCI;
        var ds_IsDefault = results[i].ds_IsDefault;
        var ds_MediaType = results[i].ds_MediaType;
        var ds_picturemanagerId = results[i].ds_picturemanagerId;
        var ds_RecordGUID = results[i].ds_RecordGUID;

        if (ds_RecordGUID) {
          $(results).each(function(index, item) {
            $('.slide-container').append(item.setAttribute(results));
          });
          //  alert("Image Uploaded Successfully..!")
        }
      }
      console.log(results);
    } else {
      Xrm.Utility.alertDialog(this.statusText);
    }
  }
};

req.send();

Answer 1

Create the div element and an attribute for the element before iterating the array of images. 在迭代图像数组之前，创建div元素和该元素的属性。
Create the img element inside the loop and keep on appending it in the div element. 在循环内创建img元素，并继续将其附加在div元素中。
Append the div to the body or other element. 将div附加到主体或其他元素。

EDIT 1: CODE SNIPPET 编辑1：代码片段

Hope the function solves you problem. 希望功能解决您的问题。

 <!DOCTYPE html> <html> <body> <script> var images = [ { url: "sample11.jpg", name: "Image 1" }, { url: "sample11.jpg", name: "Image 2" }, { url: "sample11.jpg", name: "Image 3" } ]; appendImagesToDivInBody (images); function appendImagesToDivInBody (images) { // create div var div = document.createElement("DIV"); // add id attribute var att = document.createAttribute("id"); att.value = "imageDiv"; div.setAttributeNode(att); div.innerHTML = "IMAGES ARRAY"; // append to child document.body.appendChild(div); // add images to div for (var i = 0; i < images.length; i++) { var divElement = document.getElementById ("imageDiv"); divElement.appendChild(document.createElement("br")); var img = document.createElement("IMG"); img.src = images[i].url; img.height = 100; img.width = 100; img.alt = images[i].name; divElement.appendChild (img); } } </script> </body> </html>

Answer 2

Sorry to say but I found no one who is capable to answer so I personally got the right answer. 很抱歉，我找不到能回答的人，所以我个人得到了正确的答案。

anyone who need this can see the below code 任何需要此功能的人都可以看到以下代码

 function RetriveImageRecord() {
            debugger

            var req = new XMLHttpRequest();
            req.open("GET", parent.Xrm.Page.context.getClientUrl() +
                "/XRMServices/2011/OrganizationData.svc/ds_picturemanagerSet?$select=ds_ControlName,ds_entity,ds_ImageASSCI,ds_IsDefault,ds_MediaType,ds_picturemanagerId,ds_RecordGUID",
                true);
            req.setRequestHeader("Accept", "application/json");
            req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            req.onreadystatechange = function () {
                debugger
                if (this.readyState === 4) {
                    this.onreadystatechange = null;
                    if (this.status === 200) {
                        debugger
                        var returned = JSON.parse(this.responseText).d;
                        var results = returned.results;
                        debugger
                        var newEntityId = results.ds_picturemanagerId;
                        let imgContainer = document.createElement('div');
                        imgContainer.setAttribute('class', 'slides');
                        imgContainer.setAttribute('data-imgId', newEntityId);
                        for (var i = 0; i < results.length; i++) {
                            debugger
                            var ds_ControlName = results[i].ds_ControlName;
                            var ds_entity = results[i].ds_entity;
                            var ds_ImageASSCI = results[i].ds_ImageASSCI;
                            var ds_IsDefault = results[i].ds_IsDefault;
                            var ds_MediaType = results[i].ds_MediaType;
                            var ds_picturemanagerId = results[i].ds_picturemanagerId;
                            var ds_RecordGUID = results[i].ds_RecordGUID;

                            let imgSlide = document.createElement('img');
                            imgSlide.setAttribute('src', 'data:' + ds_MediaType + ';base64,' + ds_ImageASSCI);




                            $(imgContainer).append(imgSlide);
                            $('.slide-container').append(imgContainer);



                        }



                        alert("Image Retrival Successfully..!")
                        console.log(results);
                    } else {
                        Xrm.Utility.alertDialog(this.statusText);
                    }
                }

            };
            req.send();
        }

如何在JQuery中显示从函数到div的图像

问题描述

2 个解决方案

解决方案1
0 2019-08-01 11:33:30

解决方案2
0 2019-08-02 07:47:24

如何在JQuery中显示从函数到div的图像

问题描述

2 个解决方案

解决方案1 0 2019-08-01 11:33:30

解决方案2 0 2019-08-02 07:47:24

解决方案1
0 2019-08-01 11:33:30

解决方案2
0 2019-08-02 07:47:24