我正在获取图像列表视图，而不是以网格格式显示

Posted 2023-05-08

【中文标题】我正在获取图像列表视图，而不是以网格格式显示

【英文标题】：I am getting a list view of images instead displaying in grid format

【发布时间】：2020-02-11 09:43:29

【问题描述】：

我是Salesforce 的新手，我无法使用我在顶点课程中使用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>

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

Apex 类：

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;
     

【参考方案1】：

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