lightning-image

lightning-image is a Lightning Web Component specially designed to easily
optimize image loading. It’s optimized for fixed width/height images and images that stretch the full-width of a container.

Using Salesforce CRM Content thumbnail rendition servlet to optimize the thumbnail’s size.

Problem
Solution
Install
How to use
Resolution switching
lightning-image Props

Problem

Large, unoptimized images dramatically slow down your site.

But creating optimized images for websites has long been a thorny problem.
Ideally you would:

Resize large images to the size needed by your design
Generate multiple smaller images so smartphones and tablets don’t download
desktop-sized images
Efficiently lazy load images to speed initial page load and save bandwidth
Hold the image position so your page doesn’t jump while images load

Doing this consistently across a site feels like sisyphean labor. You manually
optimize your images and then… several images are swapped in at the last minute
or a design-tweak shaves 100px of width off your images.

This isn’t ideal. Optimized images should be easy and the default.

Solution

lightning-image works seamlessly with Salesforce CRM Content thumbnail rendition servlet. To produce perfect images,
you need only:

Install lightning-image and use it in place of the built-in img
Write a controller to query the Content thumbnail
which specify the fields needed by lightning-image.

Install

There are two ways to install this component:

Using a Scratch Org: This is the recommended installation option. Use this option if you are a developer who wants to experience the code.
Using an Unmanaged Package: This option allows anybody to experience the sample app without installing a local development environment.

Installing to your Org

Set up your environment. Follow the steps in the Quick Start: Lightning Web Components Trailhead project. The steps include:

Install Salesforce CLI
Install Visual Studio Code
Install the Visual Studio Code Salesforce extensions, including the Lightning Web Components extension

If you haven’t already done so, authenticate with your org

sfdx force:auth:web:login

Clone the repository:

git clone https://github.com/hanabiiii/lightning-image.git
cd lightning-image

Deploy the component to your org:

sfdx force:source:deploy -m LightningComponentBundle:lightningImage -u [your-account]

Installing using an Unmanaged Package

Click this link to install the unmanaged package in your org.

How to use

Please check the example component: Case Attachments.

Resolution switching

lightning-image supports showing different images at different breakpoints, which is known as Resolution switching: Different sizes.

`lightning-image` props

Name	Type	Description
`title`	`string`	Passed to the `img` element.
`alt`	`string`	Passed to the `img` element. Defaults to an empty string. `alt=""`
`loading`	`string`	Set the browser’s native lazy loading attribute. One of `lazy` or `eager`. Defaults to `lazy`.
`src`	`string` / `array`	Set the image src. Array object to support resolution switching { source, sourceSize , conditionSize , conditionSetSize }.
`wrapperClass`	`string`	Spread into the default class of the wrapper element.
`wrapperStyle`	`string`	Spread into the default styles of the wrapper element.
`imageClass`	`string`	Spread into the default class of the actual `img` element.
`imageStyle`	`string`	Spread into the default styles of the actual `img` element.
`placeholderColor`	`string`	Set a colored background placeholder. You can also pass in any valid color string. Defaults to `lightgray`.
`imagePlaceholder`	`named slot`	Used to replace the default placeholder.
`durationFadeIn`	`number`	Fading duration is set up to 500ms by default.
`onload`	`event`	An event that is called when the full-size image has loaded.
`onstartload`	`event`	An event that is called when the full-size image starts loading.
`onerror`	`event`	An event that is called when the image fails to load.