В ответе json есть тонны изображений, которые не хранятся локально. Я хотел бы показать все изображения, используя нумерацию страниц, чтобы зритель мог просматривать все доступные изображения.
Here is the snippet of the lightning component that display the remote images for preview
<aura:component controller="Images_Callout" implements="force:appHostable,flexipage:availableForAllPageTypes access="global" >
<aura:attribute name="img" type="Map"/>
<aura:attribute name="response" type="Map"/>
<aura:attribute name="aspectRatio" type="string" default="Square" />
<aura:attribute name="properties" type="List"/>
<aura:attribute name="value" type="List"/>
<aura:attribute name="container" type="List"/>
<aura:attribute name="PageSize" type="Integer" default="10"/>
<aura:attribute name="currentPageNumber" type="Integer" default="1"/>
<aura:attribute name="totalPages" type="Integer" default="0"/>
<aura:attribute name="pageList" type="List"/>
<aura:attribute type="String" name="base" default ="https://pixabay.com/images/"/>
<aura:attribute name="imageId" type="String"/>
<!--Header part-->
<div class="slds-page-header" role="banner">
<div>
<p class="slds-page-header__title slds-truncate" title="Image Selection">Images</p>
</div>
</div>
<!--Header part close-->
<aura:iteration items="{!v.img}" var="item" start="0">
<aura:if isTrue="{!item.ImageId!=null}">
<aura:iteration items="{!v.item}" var="mapValue">
<aura:if isTrue="{!mapValue.aspectRatio == v.aspectRatio}">
<div class ="gallery" onclick="{!c.onClick}" title="{!item.ImageId}" >
<img src= "{!v.base + mapValue.imageFile}" style="width:200px;"/>
</div>
</aura:if>
</aura:iteration>
<div class="Container">
<lightning:button variant="brand" label="SingleProperty" onclick="{!c.onClick2}" />
<lightning:button variant="brand" label="Multiproperty" onclick="{!c.onClick2}" />
<lightning:button variant="brand" label="Branded Property" onclick="{!c.onClick2}" />
<lightning:button variant="neutral" label="Close" onclick="{!c.closeMe}"/>
</div>
</aura:component>
Ниже приведен клиентский контроллер, который вызывает контроллер на стороне сервера и получает ответ json со стороны сервера. .
({
getResponse: function(component, event) {
// create a server side action.
var action = component.get("c.getResponseContent");
// set the url parameter for getResponseContents method (to use as endPoint)
action.setStorable();
action.setParams({"payload":'{ "types": ["PPT_IMAGE"]}',
"url": 'https://pixabay.com/api/?key=13561952-c6ff1da5b37420c109968e25c'});
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
// set the response(return Map<String,object>) to response attribute.
component.set("v.response", response.getReturnValue());
var getContents = component.get("v.response");
component.set("v.img", getContents.content);
}
});
}
});
Below is the sample Json reponse that is received then I used a nested for loop to iterate through the map to get the image url for display
{"всего": 1, "numRecords": 1, "maxRecords": 1, "content": [{"ImageId": "1430a3eb", "тип": "PPT_IMAGE", "таксономии": ["/ Pty Codes / S / BGVCX"], "изображения": [{
"imageFile": "/photo/2013/10/15/09/12/Roseflower-19589_150.jpg",
"aspectRatio": "2x1"
}, {
"imageFile": "/photo/2015/11/15/09/12/Roseflower-19589_151.jpg",
"aspectRatio": "3x1"
}, {
"imageFile": "/photo/2013/10/15/09/12/Roseflower-19589_152.jpg",
"aspectRatio": "3x2"
}, {
"imageFile": "/photo/2013/10/15/09/12/Roseflower-19589_153.jpg",
"aspectRatio": "2x2"
}]
}]
}