Can we insert an image in lwc cmp without using static resource?

Question

Is it possible to add an image in a lightning Web Component w/o using static resource?

Answer 1

Yes, there are a few mechanisms. One common mechanism is using Asset Files (ContentAsset), which is stored like a File (ContentDocument/ContentVersion), but is deployable/packageable. Here is an example from the LWC Developer Guide:

Upload your Files by going to Files -> Libraries -> Asset Library and click "Upload Asset File". In this example the Asset Files are called SalesWaveLogo and PartnerLogos

assetFileExample.js

import { LightningElement } from 'lwc';
import SALES_WAVE_LOGO from '@salesforce/contentAssetUrl/SalesWaveLogo';
import PARTNER_LOGOS from '@salesforce/contentAssetUrl/PartnerLogos';

export default class AssetFileExample extends LightningElement {

    // Expose the asset file URL for use in the template
    salesWaveLogoUrl = SALES_WAVE_LOGO;

    // Expose URL of assets included inside an archive file
    goldPartnerLogoUrl = PARTNER_LOGOS + 'pathinarchive=images/gold_partner.png';

}

assetFileExample.html

<template>
    <lightning-card title="Asset File Example" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            <img src={salesWaveLogoUrl}>
            <img src={goldPartnerLogoUrl}>
        </div>
    </lightning-card>
</template>