MICRO PROJECT :: LWC - Display Images Dynamically from Static Resource
MICRO PROJECT :: Kali, VP of Sales, at upquotient.com, a career transformer and an amplifier company, has entrusted you an enterprising Salesforce Developer to get the below POC working.
REQ 01 :: One of the customers, "[Beautiful People], well known trend setters in the apparel market" of upquotient.com wanted its Sales Agents an intuitive way to display product images. They wanted only 5 groups of buttons displaying the most recent trends in the apparel market that they endorse.
----------------------------------
TECHNICAL DESIGN
----------------------------------
Your customary pattern is to analyze the requirements thoroughly and decided on the below components.
Collate appropriate images (for POC use the Trailhead characters instead)
Use Static Resource
LWC
Button Group
Appropriate JS event
Style the image as warrants
Detailed design
1] Bundle appropriate images into a folder, say "images" and compress the same. Name the compressed file for instances "Trailhead_Characters"
2] Upload the compressed folder (.zip) into Static Resource. Name it "Trailhead_Characters" (it can be any, it just happened to be identical to the compressed folder name)
3] Create a LWC. This can be surfaced inside Lightning App page later
4] As the requirement is to have a group of button and to display the images intuitively ... use button group cmp and "mouseover" JS event