Mobile and Offline Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Mobile App Development with Lightning Web Components and LWC Offline
Create Mobile-Ready Components
Use Mobile Device Features in Mobile Apps
Offline Considerations and Limitations
Offline Environment Details
Use Salesforce Features While Offline
Use GraphQL While Mobile and Offline
Use Apex While Mobile and Offline
Use Images in an LWC Offline-Enabled Component
Use Images Uploaded as Files (ContentDocument) in an LWC
Use Images Uploaded as Asset Files
Use Images Uploaded as Static Resources
Image Priming and Offline Considerations
Upload Images While Offline
Use Third-Party JavaScript in an LWC Offline-Enabled Component
Navigation
Development Tools and Processes
Quick Start Tutorials
PDF

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

// imageFromStaticResource.js
import { LightningElement } from 'lwc';
import TRAILHEAD_LOGO from '@salesforce/resourceUrl/trailhead_logo';

export default class ImageFromStaticResource extends LightningElement {
    get trailheadLogoUrl() {
        return TRAILHEAD_LOGO;
    }
}

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.

<!-- imageFromStaticResource.html -->
<template>
    <lightning-card>
        Display an image directly from a static resource: {trailheadLogoUrl}
    </lightning-card>

    <template if:true={trailheadLogoUrl}>
        <img src={trailheadLogoUrl}/>
    </template>

</template>