'How to display attached images(uploaded via lightning-formatted-rich-text) in a modal

im trying to display images that are uploaded into a modal shown below:

<template iterator:thefield={images}> 
                <template if:true={imagesAttached}>
                    <div class="slds-file slds-file_card slds-float_right"  key={thefield.value.apiName} style="width: 15rem">
                        <div class="slds-grid slds-gutters">
                            <div class="slds-col slds-p-horizontal_medium">
                              <span> 
                                 <div class="slds-file slds-file_card slds-float_right" style="width: 15rem">
                                   <figure> 
                                     <img src={images} alt="Description of the image" />       
                                    </figure>
                                 </div>
                              </span>
                           </div>
                       </div>
                  </div>
               </template>
        </template>

I have a function that takes the image and put it in an array.

 getImages(string) {
        const imgRex =  /<img .*?>/g // /<img [^>]*src=['"]([^'"]+)[^>]*>/gi
        const images = [];
          let img;
          while ((img = imgRex.exec(string))) {
               images.push(img);
               if(images.length > 0){
                this.imagesAttached = true; 
            }
          }
        return images;
      }

I would appreciate the help. Thank you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source