Javascript 我得到的是图像列表视图，而不是以网格格式显示

我是

Salesforce

新手，我无法使用我在apex类中使用

JSON

提供的URL图像形成网格，它们返回的是列表视图，而不是并排生成的结果

任何帮助都将不胜感激

组件：

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

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

对于像这样的情况，最好使用

，因为带有aura的slds网格：迭代是很难做到的，例如，您的组件只是重复一个slds网格div，每个图像只有一列。如果您想让它与slds网格一起工作，您需要以2人一组的方式迭代图像，因此您的属性必须是图像的2d数组。或者，您可以添加自定义CSS use floats并去掉列slds col类。希望这有帮助