Salesforce: Get image by Content Key added by the User, using ContentReference in code's metadata

Question

I'm new to Salesforce and I'm stuck with showing an imaged added by ContentReference, when adding the image in the Experience Builder it returns a Content Key like this "MCTYRWQGOBCVHMHHLCSYZ2PWXQVQ", but how can I use it to show the selected image in the builder and in the web page I'm building? I tried this solution (https://salesforce.stackexchange.com/questions/333877/spring21-use-cms-content-in-lwc) and adapted it but it throws me the following error :

app:9 [webruntime] router level error 
error:  Proxy {} 
wcstack:
   <webruntime-app>
    <webruntime-router-container>
    <webruntimedesign-component-wrapper>
    <webruntimedesign-design-component>
    <webruntimedesign-component-wrapper>
    <webruntimedesign-design-component>
    <c-my-first-l-w-c>
    <lightning-layout-item>

Not sure what is happening or what shoul I do, again I'm very new to salesforce. This is my code:

HTML:

<template>
  <p>this is the leadlist {contentId}</p>
  <img src={contentId} data-contentkey={contentId} class="image"></img>
  <lightning-button variant="brand" label={bntLabel} title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</template>

JS:

import getManagedContentByContentKeys from '@salesforce/apex/leadList.getManagedContentByContentKeys';
import { LightningElement, api, wire } from 'lwc';

export default class LeadList extends LightningElement {

  @api bntLabel;
  @api contentId;

  handleClick = () => {
      console.log("You clicked me!")
      console.log('contentId', this.contentId)
  }

  @wire(getManagedContentByContentKeys, { managedContentIds: this.contentId})
  managedContent({ error, data }) {
      console.log('it entered the function:');

    if (data) {
      console.log('data:');
      console.log({data});
      // Assign data to a variable which you can use in your HTML.
    
    } else if (error) {
      console.log('error:', error);
     // Handle the error. 
    }
  }
}

Metadata:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>52.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
      <target>lightningCommunity__Page</target>
      <target>lightningCommunity__Default</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightningCommunity__Default">
          <property name="bntLabel" type="String" default="click"></property>
          <property type="ContentReference" name="contentId" label="Content ID"></property>
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Apex class:

public with sharing class leadList {
  public leadList() {

  }

  @AuraEnabled(cacheable=true)
  public static String getManagedContentByContentKeys(String communityId, String[] managedContentIds, Integer pageParam, Integer pageSize, String language, String managedContentType, Boolean showAbsoluteUrl){
    return 'hola';//ConnectApi.ManagedContent.getManagedContentByContentKeys(communityId, managedContentIds, pageParam, pageSize, language, managedContentType, showAbsoluteUrl);
  }
}

Answer 1

It looks like there are a few minor bugs in the code and that is the reason you aren't having much luck.

Firstly, the @wire method in the LWC requires an array of managedContentIds, not just a single one. The syntax for the dynamic variable is also incorrect (LWC Documentation: Wire Adapters).

import getManagedContentByContentKeys from '@salesforce/apex/leadList.getManagedContentByContentKeys';
import { LightningElement, api, wire } from 'lwc';

export default class LeadList extends LightningElement {
  @api bntLabel;
  @api contentId;

  // Added the contentId to an array of contentIds
  get managedContentIds() {
    return [this.contentId]
  }

  handleClick = () => {
      console.log("You clicked me!")
      console.log('contentId', this.contentId)
  }

  // Fix the syntax for dynamic props for `@wire` methods.
  @wire(getManagedContentByContentKeys, { managedContentIds: '$managedContentIds'})
  managedContent({ error, data }) {
    if (error) {
      console.error('error:', error);
    } else if (data) {
      console.log('data: ', data);

      // destructure the properties we want from the response object
      const {
        managedContentId,
        contentNodes: { source, altText, title },
      } = data

      // Data here should be set to a property for the html to render
      this.image = {
        url: source ? source.unauthenticatedUrl : '',
        alt: altText ? altText.value : '',
        title: title ? title.value : '',
      }
    }
  }
}

The apex method also returns a test string (I assume this was a mistake returning "hola"). You can also set the extra properties to null/true if you don't intend on passing them.

public with sharing class leadList {
  public leadList() { }

  @AuraEnabled(Cacheable=true)
  public static String getManagedContentByContentKeys(String communityId, String[] managedContentIds){
    return ConnectApi.ManagedContent.getManagedContentByContentKeys(
      communityId,
      managedContentIds,
      null,
      null,
      null,
      null,
      true
    );
  }
}

Lastly, the html should render the this.image we set above in the javascript. Instead of assigning contentId to the <img src={contentId}/>, it should use the this.image reference, <img src={image.url} alt={image.alt}/>

<template>
  <p>this is the leadlist {contentId}</p>
  <img src={image.url} alt={image.alt} class="image"></img>
  <lightning-button variant="brand" label={bntLabel} title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</template>

This question should probably have been posted on salesforce.stackexchange.com.