Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Use Images Uploaded as Static Resources

Static resources are a method for packaging one or more images, stylesheets, or JavaScript files for use within Lightning web components, and other Salesforce customization features.

Referencing an image stored in a Static Resource is straightforward, and fully documented. We present only a simple example here. See Access Static Resources the Lightning Web Component Developer Guide for complete details.

The critical elements of an offline-ready implementation are:

Access the URL of the resource by importing it using the @salesforce/resourceUrl module.
Provide the image URL via a getter function.
Use the getter function for the src attribute of an img tag in your HTML template.

While there are other methods for referencing images in an LWC, the preceding elements are required for offline image access to function. The Komaci static analyzer looks for this specific pattern when determining images to prime. Additionally, your getter function must be statically analyzable. If its result can only be determined at runtime, the image can’t be primed.

Important

Example

1// imageFromStaticResource.js
2import { LightningElement } from 'lwc';
3import TRAILHEAD_LOGO from '@salesforce/resourceUrl/trailhead_logo';
4
5export default class ImageFromStaticResource extends LightningElement {
6    get trailheadLogoUrl() {
7        return TRAILHEAD_LOGO;
8    }
9}

LWC Offline doesn’t support archive static resources at this time. While you can upload each image as a separate static resource, we recommend that you use Content Assets, which do support archive files, for collections of related images. See Use Images Uploaded as Asset Files.

Warning

With the image URL provided by the getter function in the preceding component JavaScript, referencing the image in the HTML template is just like referencing any image in HTML. Use it in the src attribute of an HTML img tag.

1<!-- imageFromStaticResource.html -->
2<template>
3    <lightning-card>
4        Display an image directly from a static resource: {trailheadLogoUrl}
5    </lightning-card>
6
7    <template if:true={trailheadLogoUrl}>
8        <img src={trailheadLogoUrl}/>
9    </template>
10
11</template>

Mobile and Offline Developer Guide

Use Images Uploaded as Static Resources

Example

See Also