function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
krios demokrios demo 

Display the selected rich text image on popup

I have a scenario.

I have products properties in which all product details stored which are retrived from apex class.

In the object I have Product_Image__c named rich text field is there in which my all individual product images are stored.

In my LWC Component when i clicked on "View Image" button same related image should be open on popup. 

HTML:

<lightning-button variant="success" label="View Product Image" class="slds-var-m-left_x-small" 
 title="View Product Details" value={product.Id} onclick={showmodal}></lightning-button>
    <template if:true={isShowModal}>
        <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <!-- sldsValidatorIgnoreNextLine -->
                            <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large" 
                    variant="bare-inverse" onclick={CloseModal} class="slds-modal__close">
                            </lightning-button-icon>
                        </header>
            <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id">
                <lightning-formatted-rich-text value={selectedproductimage.product.Product_Images__c} onclick={openModal}>
                                </lightning-formatted-rich-text>
                        </div>
        </div>
    </template>

JS:

export default class VIP_ProductCatalogue extends NavigationMixin (LightningElement) {

    @track Products;
    @track productsFound;
    @track isModalOpen = false;
    @track isShowModal = false;
    selectedproductimage;

showmodal() 
    {
        this.selectedproductimage = this.currentTarget.template.item;
        this.isShowModal = true;
    }
CloseModal() 
    {
        this.isShowModal = false;
    }

Below image is for ref of my UI

User-added image
Shri RajShri Raj
Here is your updated code with corrected syntax errors:

HTML:

<template>
    <lightning-button variant="success" label="View Product Image" class="slds-var-m-left_x-small" 
     title="View Product Details" value={product.Id} onclick={showModal}></lightning-button>
    <template if:true={isShowModal}>
        <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <!-- sldsValidatorIgnoreNextLine -->
                            <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large" 
                    variant="bare-inverse" onclick={closeModal} class="slds-modal__close">
                            </lightning-button-icon>
                        </header>
            <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id">
                <lightning-formatted-rich-text value={selectedProductImage.product.Product_Images__c}>
                                </lightning-formatted-rich-text>
                        </div>
        </div>
    </template>
</template>
  
export default class VIP_ProductCatalogue extends LightningElement {

@track products;
@track productsFound;
@track isShowModal = false;
selectedProductImage;

showModal(event) {
    this.selectedProductImage = event.currentTarget.template.item;
    this.isShowModal = true;
}

closeModal() {
    this.isShowModal = false;
}
}