Lightning Web Components supports multiple ways of referencing graphics assets in a component. Not all of these methods work when the component runs offline. LWC Offline supports several methods of referencing images in your offline-ready Lightning web components.
The standard methods for referencing images (and other binary assets) in an LWC are:
VersionDataUrl field of the latest ContentVersion related to a particular ContentDocument record.@salesforce/contentAssetUrl module.@salesforce/resourceUrl module.For LWCs with images intended to be used offline, we recommend the first two options. Static resources support offline images, but with limitations.
Support for offline images requires that both your Salesforce org and your mobile app are updated to the Summer ’23 release (API 58.0) or later.
Note
Use Images Uploaded as Files (ContentDocument) in an LWC
Files are a general mechanism to upload and make binary files, such as images, available in your Salesforce org. Files can be associated with a specific record, which makes them ideal for product photos, images captured during a service call or other transaction, and otherwise adding images to business activities that you track in Salesforce.
Use Images Uploaded as Asset Files
Asset files are the modern alternative to static resources. Asset files are ideal for images that are used throughout your components and apps—for example, user interface elements like icons—or otherwise aren’t related to a specific record.
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.
Image Priming and Offline Considerations
LWC Offline isn’t magic. If an image hasn’t been primed before you go offline, it can’t be displayed while offline. LWC Offline primes image assets that are referenced in component template files, in the src attribute of a standard HTML img tag.
j