Mobile and Offline Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Use Images Uploaded as Files (ContentDocument) in an LWC
Files have a complex representation in Salesforce, using multiple standard objects to store the file itself and information about it, including ownership, access controls, and multiple versions of that file. ContentDocument is the primary object and, for the purposes of displaying images in your LWCs, you can reference the binary data of a file through a relationship that is the same for any uploaded file.
- Access the URL of the File’s current version through the @salesforce/schema/ContentDocument.LatestPublishedVersion.VersionDataUrl related field.
- Provide the image URL via a getter function that parses the record data of the current version.
- Use the getter function for the src attribute of an img tag in your HTML template.
Example
The following example is simple, and uses a hard-coded ContentDocument record ID, but it illustrates the details. You can also access named renditions (thumbnails) of the image by adding a thumb parameter to the URL.
// imageFromContentDocument.js
import { LightningElement, wire } from 'lwc';
import { getFieldValue, getRecord } from 'lightning/uiRecordApi';
import IMAGE_URL_FIELD from
'@salesforce/schema/ContentDocument.LatestPublishedVersion.VersionDataUrl';
export default class ImageFromContentDocument extends LightningElement {
@wire(getRecord, {recordId: '069RO0000003FMoYAM', fields: [IMAGE_URL_FIELD] })
contentDocImage;
get imageUrl() {
return getFieldValue(this.contentDocImage.data, IMAGE_URL_FIELD);
}
get resizedImageUrl() {
return getFieldValue(this.contentDocImage.data, IMAGE_URL_FIELD) +
'?thumb=THUMB240BY180';
}
}With the image URL provided by the getter functions in the preceding component JavaScript, referencing the images in the HTML template is just like referencing any image in HTML. Use it in the src attribute of an HTML img tag.
<!-- imageFromContentDocument.html -->
<template>
<lightning-card>Display an image from
ContentDocument {imageUrl}</lightning-card>
<template if:true={contentDocImage}>
<img src={imageUrl}/>
</template>
<lightning-card>Display a resized image from ContentDocument
{resizedImageUrl}</lightning-card>
<template if:true={contentDocImage}>
<img src={resizedImageUrl}/>
</template>
</template>This feature works in LWC Offline beginning in Spring ’23, which is API version 57.0. Be sure to set that minimum API version for any component that references images while offline.
<?xml version="1.0" encoding="UTF-8"?>
<!-- imageFromContentDocument-meta.xml -->
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__RecordAction</target>
<target>lightning__GlobalAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction,lightning__GlobalAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>