-1

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

closed as unclear what you're asking by Pranay Jaiswal, glls, battery.cord, Mohith Shrivastava, Reshma Apr 18 at 11:13

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

0

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!

enter image description here

  • Hello @Patlatus thank you for your replying please can you tell me how did you set the URL of the image in Javascript file (based on what did you choose this URL) – sally yamak Apr 18 at 9:17
  • when you open the ContentVersion file and inspect the link it has, you can get that URL. Also several URL are mentioned in other answers like salesforce.stackexchange.com/questions/148524/… – Patlatus Apr 18 at 10:21
  • @sallyyamak if this answer answers your question, please mark it as accepted answer. – Patlatus Apr 19 at 10:12
  • another question please after i insert the image(ContentVersion) through the apex class it still not available on preview what supposed to be the problem – sally yamak Apr 19 at 12:42
  • @sallyyamak if this is a different question please consider creating a different question. If you insert ContentVersion through Apex, then you know ID of it after insert and you can return that Id to Lightning – Patlatus Apr 19 at 12:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.