javascript - 我正在获取图像的 ListView ，而不是以网格格式显示

Question

我是 Salesforce 的新手，我无法使用来 self 在 apex 类中使用 JSON 提供的 URL 的图像形成一个网格，他们正在返回一个 ListView 而不是并排生成。

如有任何帮助，我们将不胜感激。

组件:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="pic_ctrl">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="urls" type="String" />

    <!--  data: {!v.urls}  -->
    <aura:iteration items="{!v.urls}" var="row">
        <div class="slds-grid  slds-wrap"  style="height: 203px; width:400px ; background-color:white;" onclick="{!c.showcarousel}" >
            <div class="slds-col slds-size_1-of-2">
                <img src="{!row}"  style="height: 200px; width:400px ; background-color:white;"/>
            </div>
        </div>
    </aura:iteration>
</aura:component>

Controller.js:

({ 
    doInit : function(component, event, helper) {
        var getdata = component.get("c.geturl");
        var h = [];
        getdata.setCallback(this, function(response){      
            var state = response.getState();
            if (state === 'SUCCESS'){
                var Result = response.getReturnValue();
                console.log("enter" + Result);
                // console.log('1'+JSON.parse(result));
                //var finalJson = JSON.parse(finalJson1);
                var len=Result.length;
                console.log("final length" + Result.length);
                for(var i=0; i<len; i++){
                    console.log (Result[i]["imageURL"]); 
                    h.push(Result[i]["imageURL"]);
                }
                console.log("test-->"+h);
                component.set("v.urls",h);
                console.log("caught");
            }
        });
        $A.enqueueAction(getdata);      
}

顶点类:

public class pic_ctrl {
    @AuraEnabled
    public static Object geturl() {
        String ImgJson = ' [        {"imageName": "Mice1.jpg","imageId": "101", "imageURL": "https://labpulse.s3.amazonaws.com/images/images1.jpg", "imageDescription": "Some description" },{"imageName": "Mice2.jpg","imageId": "101", "imageURL": "https://labpulse.s3.amazonaws.com/images/images2.jpg", "imageDescription": "Some description" },' +
   '{ "imageName": "Mice3.jpg","imageId": "102",  "imageURL": "https://labpulse.s3.amazonaws.com/images/images3.jpg", "imageDescription": "Some description" }, {"imageName": "Mice4.jpg", "imageId": "103", "imageURL": "https://labpulse.s3.amazonaws.com/images/images4.jpg",  "imageDescription": "Some description" }]';

        Object Finaljson= JSON.deserializeUntyped(ImgJson); 

        return Finaljson;
    } 
}

Answer 1

As pointed out in this answer最好使用 <lightning:layout>对于像带有光环的 slds-grid 这样的情况:迭代很难做到，例如你的组件只是重复一个 slds-grid div，每个图像只有一个列。如果您希望它与 slds-grid 一起使用，您需要以 2 组为一组遍历图像，因此您的属性必须是图像的二维数组。或者，您可以添加自定义 CSS 使用 float 并删除列 slds-col 类。希望这有帮助