0

I am creating a LWC component for admins/content creators - which is basically a card generator with a vimeo modal popup. So far so good.

The card has a picture and that picture is located in Asset Library. At this time, it is inside a ziparchive file - so users can enter an address path to the image and display that image. This also works with updating to more or newer images. eg.

import productImages from '@salesforce/contentAssetUrl/ProductsZip';

export default class ImgnVideo extends LightningElement { 
   @api image; // exposed as target property
   this.topicImage = productImages+'pathinarchive=Products/'+this.image; 
}

Unfortunately, this is too tedious for the client.

I am looking for another way to import these images - so it'll be as easy as to upload a new asset file and then write the name of that asset file into the component. As long as I can find a way in that sticks, I can probably find a solution for it but right now I am at wits end.

I have been toying with the idea of querying for contentAssets and ContentBody, to pull the files from apex and interpret them in LWC but that seems like meandering to me. I might as well end up trying that path if no other opens itself up. Any help would be much appreciated!

2 Answers 2

1

I found a solution for my problem: Apex Controller:

public with sharing class ImageReceiveController {
    @AuraEnabled(cacheable=true)
    public static string getImage(String Title){
        try {
            return [SELECT VersionDataUrl FROM ContentVersion WHERE Title =: Title AND IsLatest = true LIMIT 1].VersionDataUrl ;     
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

LWC controller apex call

@wire(getImage, {Title: '$image'})
imageUrl({error,data}){
    if(data){
        this.topicImage = data.replace('my.salesforce.com/sfsites/c', 'file.force.com');
    } else if (error) {
        console.error(error);
    }
}

html

<div class="container-xl">
    <img class="imageOfProductTutorial"
         style="width: 240px; height: 240px;"
         src={topicImage}
    />
</div>

So basically: I use Apex to get the URL from ContentVersion and because I am calling it from an Experience site, I get the URL with "my.salesforce.com/sfsites/c" instead of "file.force.com" as I get directly from query editor.

Replacing that and making sure to track topicImage, I can now dynamically use any file shared with every user.

0

I found one more solution which makes it easy to generate an URL for ContentAsset files.

public static String getAssetUrl(String contentAssetDevName) {
    ContentAsset caRec = [SELECT Id FROM ContentAsset WHERE DeveloperName = :contentAssetDevName];
    return '/file-asset-public/' + caRec.Id + '?oid=' + UserInfo.getOrganizationId();
}

In LWC, you need to call this method using a wire

@wire(getAssetUrl, {contentAssetDevName: '$assetFileName'})
assetImageUrl({error, data}){
    if(data){
        this.assetImageUrl = data;
    } else if (error) {
        console.error(error);
    }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .