{"id":6154,"date":"2021-05-29T08:23:17","date_gmt":"2021-05-29T08:23:17","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6154"},"modified":"2021-07-12T06:59:45","modified_gmt":"2021-07-12T06:59:45","slug":"how-to-dynamically-set-base-64-image-in-lightning-carousel-image","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/05\/29\/how-to-dynamically-set-base-64-image-in-lightning-carousel-image\/","title":{"rendered":"How to Dynamically set base 64 image in lightning: carousel image"},"content":{"rendered":"\n

In this blog we are going to learn about how to dynamically set image in lightning: carousel. We use this component to display the collection of image. In addition, this component show only one image at a time. For example, let\u2019s start with these component\u2019s attribute.<\/p>\n\n\n\n

Src:<\/strong> This attribute stores the path of the image.<\/p>\n\n\n\n

Header:<\/strong> The heading of the image element is specified in this attribute.<\/p>\n\n\n\n

Description:<\/strong> Image description is provided here.<\/p>\n\n\n\n

alternativeText:<\/strong> In case the image is not loaded, this text will be displayed.<\/p>\n\n\n\n

<lightning:carousel disableAutoScroll=\"true\">\n<aura:iteration items=\"{!v.Imagelst}\" var=\"tempimg\">\n<lightning:carouselImage  src = \"{!'data:image\/png;base64,' + tempimg.Image__c}\" header = \"Image\" >\n<\/lightning:carouselImage> \n<\/aura:iteration> \n<\/lightning:carousel>  \n<\/code><\/pre>\n\n\n\n
In above example we can take image data into one list i.e. \u201cImagelst \u201d and we can iterate list using aura: iteration.  \u201cImagelst \u201d is a wrapper object. It’s used to wrap the carousel components together, other features like header, description etc can also be changed depending on the requirement.\u00a0We can store base 64 string into object record OR we can directly get image from static resource also.<\/p>\n\n\n\n
\u201cdata: image\/png;base64\u201d is an inlined image (png), encoded in base64. It can make a page faster ,the browser doesn’t have to query the server for the image data separately, saving a round trip.<\/p>\n\n\n\n
For instance, to use images in your org, upload them as static resources in the Static Resources page in Setup. In addition, to reference a resource in\u00a0\u201clightning:carouselImage\u201d<\/code>, use\u00a0\u201c{!$Resource.carousel}\"<\/code>\u00a0syntax in your\u00a0src<\/code>\u00a0attribute, where\u00a0image<\/code>\u00a0is the name you provided in the\u00a0Name<\/code>\u00a0field on the setup page.<\/p>\n\n\n\n
If the image path is invalid or the image does not load, because the user is offline or any other reason, the description and alternative text are shown in place of the image.<\/p>\n\n\n\n
Example<\/em><\/span><\/strong><\/h4>\n\n\n\n
<aura:component implements=\"force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction\" access=\"global\" >\r\n    <aura:attribute name=\"lstimg\" type=\"Object[]\"\/>\r\n    <aura:handler name=\"init\" action=\"{!c.listAction}\" value=\"{!this}\"\/>\r\n    <div class=\"slds-align_absolute-center\" style=\"height: 5rem;\">\r\n        <div class=\"slds-size_1-of-2\">\r\n            <div class=\"slds-box slds-align_absolute-center\" style=\"height: 5rem; position: absolute; width: 300px; height: 200px; z-index: 15; top: 50%; left: 50%; margin: -100px 0 0 -150px; border-color: rgb(255, 255, 255);\" >\r\n                <lightning:carousel disableAutoScroll=\"false\">\r\n                    <aura:iteration items=\"{!v.lstimg}\" var=\"img\">\r\n                        <lightning:carouselImage width=\"10px\" height=\"10px\" src = \"{!img.image}\" header = \"{!img.Header}\" description = \"{!img.Description}\" alternativeText = \"{!img.AlterText}\" href = \"{!img.imgUrl}\">\r\n                        <\/lightning:carouselImage>\r\n                    <\/aura:iteration>\r\n                  <\/lightning:carousel>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/aura:component>\n\n\n({\r\n\tlistAction : function(component, event, helper) \r\n\t{\r\n\t\t\/\/change the image names,header,description etc as required\r\n\t\tvar name=['Carousel1','Carousel2','Carousel3'];\r\n\t\tvar header=['Card1','Card2','Card3'];\r\n\t\tvar description=['Description1','Description2','Description3'];\r\n\t\tvar AlternativeText=['Text1','Text2','Text3'];\r\n\t\tvar ImageUrl=['https:\/\/www.salesforce.com','https:\/\/www.salesforce.com','https:\/\/www.salesforce.com'];\r\n\t\tvar b=['1','2','3','4','5'];\r\n\t\tvar list1=[];\r\n\t\tvar a=name.length;\r\n\t\tfor(var i=0;i<a;i++)\r\n\t\t{\r\n\t\t\tlist1.push({image:$A.get('$Resource.'+name[i]),Header:header[i],Description:description[i],AlterText:AlternativeText[i],imgUrl:ImageUrl[i]}) ;\r\n\t\t}\r\n\t\tcomponent.set(\"v.lstimg\",list1);\r\n\t}\r\n})\r\n\r<\/code><\/pre>\n\n\n\n
Output:<\/p>\n\n\n\n
\"Carousel<\/a><\/center>\n
Carousel Image Output<\/i><\/center><\/font>\n\n\n\n
In conclusion, we can dynamically display image by using Lightning:carousel component and\u00a0lightning:carouselImage component.<\/p>\n\n\n\n
We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com<\/a><\/p>\n\n\n\n
About Us<\/b><\/br>\n
Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.

 Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration<\/a> for Sage X3<\/a>, Sage 100<\/a> and Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on Salesforce AppExchange<\/a>.
 The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.

 For more information on our Salesforce products and services, contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n
Related Posts:<\/strong><\/p>\n\n\n\n