function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sujata Gusain 6Sujata Gusain 6 

how can pass the "background-image" value from data

<template>
  <div class="card lt-purple full mt-24">
    <h4>New Customers</h4>
    <p>
        Welcome new customers with love. Send them special deals and
        discounts via email.
    </p>
    <template if:true={renderTable} >
        <div class="table">
    <ul class="slds-list_horizontal">  
        <li for:each={topFiveContacts} for:item="item" key={item.Id}>
            <div class="user-pic"
            style="background-image: url('images/icons/icons_dash/user1.png')"></div>
            <span>{item.FirstName}</span>
        </li>
       <li if:true={viewAllContacts}>
            <div class="user-pic">+{remainingRecordsCount}</div>
            <span><a href="#">View All</a></span>
        </li>
    </ul>
    </div>
    </template>
</div>
 
</template>

 
PriyaPriya (Salesforce Developers) 

Hi Sujata,

Can you please elaborate your requirement ?

Regards,

Priya Ranjan
Sujata Gusain 6Sujata Gusain 6
I want to make UI better display the images in circles with pending around and also maintain some padding between images and view all,
This is my required UI.
this is my output.User-added image
User-added image
.HTML 
<template>
  <div class="card lt-purple full mt-24">
    <h4>New Customers</h4>
    <p>
        Welcome new customers with love. Send them special deals and
        discounts via email.
    </p>
    <template if:true={renderTable} >
        <div class="table">
    <ul class="slds-list_horizontal">  
        <li for:each={topFiveContacts} for:item="item" key={item.Id}>
            <div class="user-pic"
            style="background-image: url('images/icons/icons_dash/user1.png')"></div>
           <!-- <div class="user-pic"> <img src= {item.PhotoUrl} alt={item.FirstName} /></div>-->
            <span>{item.FirstName}</span>
        </li>
       <li if:true={viewAllContacts}>
            <div class="user-pic">+{remainingRecordsCount}</div>
            <span><a href="#">View All</a></span>
        </li>
    </ul>
    </div>
    </template>
</div>
 
</template>

In the place of blow line 
 style="background-image: url('images/icons/icons_dash/user1.png')"></div>
I want to get dynamic value instead of static.