Salesforce FileUpload（六） 上传之后头像如何显示

public with sharing class AccountInfoController {
    @AuraEnabled(Cacheable=true)
    public static AccountInfoWrapper getAccInfoRecord(Id recordId) {
        AccountInfoWrapper wrapper = new AccountInfoWrapper();
        Account accountItem = [SELECT
                                Id,
                                Name
                                FROM Account
                                WHERE Id = :recordId];
        wrapper.account = accountItem;

        List<Contact> resultContactList = [SELECT
                                        Id
                                        FROM Contact
                                        WHERE AccountId = :recordId];
        if (resultContactList != null && resultContactList.size() > 0) {
            wrapper.contactList = resultContactList;
        }
        return wrapper;
    }

    @AuraEnabled(Cacheable=true)
    public static String getContentVersionRecord(String recordId) {
        String contentVersionId = '';
        List<ContentDocumentLink> contentDocumentLinkList = [SELECT Id,
                                                                    LinkedEntityId,
                                                                    ContentDocumentId
                                                                    FROM ContentDocumentLink
                                                                    WHERE LinkedEntityId =:recordId];
        if(!contentDocumentLinkList.isEmpty()) {
            Set<Id> documentIdSets = new Set<Id>();
            for (ContentDocumentLink Item :contentDocumentLinkList) {
                documentIdSets.add(Item.ContentDocumentId);
            }

            List<ContentVersion> contentVersionList = [SELECT Id,
                                                        ContentDocumentId
                                                        FROM ContentVersion
                                                        WHERE ContentDocumentId in:documentIdSets
                                                        AND FileType = 'JPG'
                                                        order by CreatedDate desc];
            if(!contentVersionList.isEmpty()) {
                contentVersionId = contentVersionList.get(0).Id;
            }
        }
        return contentVersionId;
    }

    public class AccountInfoWrapper {
        @AuraEnabled
        public Account account;
        @AuraEnabled
        public List<Contact> contactList;
    }
}

import { api, track, LightningElement } from 'lwc';
import personIcon from "@salesforce/resourceUrl/personIcon";
import getContentVersionRecord from "@salesforce/apex/AccountInfoController.getContentVersionRecord";

export default class AccountInfo extends LightningElement {
    @api
    account;

    @track recordId;

    @api
    contactList;

    @track imageUrl;

    async connectedCallback() {
        this.recordId = this.account.Id;
        this.contentVersion = await getContentVersionRecord({ recordId: this.account.Id });
        this.imageUrl = '/sfc/servlet.shepherd/version/download/' + this.contentVersion;
    }

    get accountImageStyle() {
        return `background-image: url(${personIcon})`;
    }
    handleClickForAcc(event) {
        console.log('>>>>>>>this.account.Id>>::'+this.account.Id);
        let openUrl = '/s/accountDetails?recordId=' + this.account.Id;
        let target = '_self';
        window.open(openUrl, target);
    }
}

<template>
    <div class="grey-area" style="width: 100%;">

            <lightning-layout multiple-rows="true">
                <lightning-layout-item class="slds-var-p-around_xx-small" flexibility='auto' size='12'>
                    <lightning-layout multiple-rows="true">
                        <lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
                            <!-- <div class="account-image" style={accountImageStyle}></div> -->
                            <template if:true={imageUrl} >
                                    <img class="img-style" src={imageUrl}/>
                            </template>
                        </lightning-layout-item>
                        <lightning-layout-item padding="horizontal-none" flexibility='auto' size='11'>
                            <lightning-layout multiple-rows="true">
                                <lightning-layout-item padding="horizontal-none" flexibility='auto' size='12'>
                                    <h1>&nbsp;</h1>
                                </lightning-layout-item>

                            </lightning-layout>

                            <lightning-layout multiple-rows="true">

                                <lightning-layout-item padding="horizontal-none" flexibility='auto' size='12'>
                                    <div class="account-basic">
                                        <div style="font-size: 25px;margin-left:2%;"><A onclick={handleClickForAcc}>{account.Name}</A></div>
                                        <h5 class="account-kana" style="margin-left:2%;"></h5>
                                    </div>
                                </lightning-layout-item>
                            </lightning-layout>
                        </lightning-layout-item>
                    </lightning-layout>

                    <div style="margin-left: 2%;">
                        <lightning-layout multiple-rows="true" style="margin-top:20px;">
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
                                <c-file-uploader-lwc
                                    record-id={recordId}
                                ></c-file-uploader-lwc>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
                                <h1 style="font-size:16px;font-weight:bold">基本情報</h1>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='4'>
                                <span class="label"></span>
                                <span class="value"></span>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='2'>
                                <span class="label"></span>
                                <span class="value"></span>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='4'>
                                <span class="label"></span>
                                <span class="value"></span>
                            </lightning-layout-item>
                        </lightning-layout>
                    </div>
                </lightning-layout-item>
            </lightning-layout>

    </div>
</template>

.grey-area {
  border-top: 1px solid #E4E5EA;
  border-bottom: 1px solid #E4E5EA;
  box-shadow: 0 2px 6px 0px rgb(0 0 0 / 10%);
  background-color: #F8F8F8;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 100%;
}

.account-image {
  width: 100px;
  height: 100px;
  margin-right: 2rem;
  border-radius: 50px;
  background-color: #aaa;
  background-size: cover;
  background-position: center 10px;
  background-repeat: no-repeat;

}

.img-style {
  border-radius: 50%;
  margin-top: 1%;
  margin-left: 1%;
}