How to display image from ContentVersion object in Lightning Web Component [closed]

Question

how can i display image coming from ContentVersion object in datatable using lightning web component

Answer 1

There are several options to implement it.

If you know ContentVersion Id, you could just create a link and include img tag with src attribute to that link.

Another option to query for VersionData and display image based on VersionData. However, this option is more complicated.

For example, to implement the first option one could write the following code

Listing of imageDisplay.html

<template>
    <lightning-input onchange={inputChange}></lightning-input>
    <template if:true={imageUrl}>
        <img src={imageUrl}/>
    </template>    
</template>

Listing of imageDisplay.js

import { LightningElement, track } from 'lwc';

export default class ImageDisplay extends LightningElement {
    @track imageUrl;
    inputChange(e) {
        if (e.target.value)
            this.imageUrl = '/sfc/servlet.shepherd/version/download/'  + e.target.value
    }
}

Listing of imageDisplay.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="imageDisplay">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Next, go ahead an upload some content, for example, some image that can be posted to your coworker for birthday occasion who likes both Star Wars and Force.com and check its Id or query for it.

In my case, Id of the content version I have uploaded is 0681t000005tiKe, for your case it would be different.

Next, go ahead and place your component somewhere to see it, for example, on the home page and save it and activate it.

Next, go to your home page (or any page you have placed your component), and insert the id of Content Version.

Voila!