How to Upload and Show Images in Lightning Aura Component | Salesforce Developer Guide

In order to upload an image, you have two ways either use a standard file:upload or create a custom image file upload.

Using the standard file:upload

Component:

For file:upload

<aura:attribute name="filetype" type="List" default="['.png', '.jpg', '.jpeg']" />
<lightning:fileUpload label="Attach receipt"
       name="fileUploader"
       multiple="false"
       accept="{!v.filetype}"
       recordId="{!v.CaseObj.Id}"
       onuploadfinished="{!c.handleUploadFinished}"
       />

In this example you can add only the image of type .png', '.jpg', '.jpeg as defined in the attribute.

This file:uplaod will automatically upload the image in the defined parent id. 

Don't forget to check out: 5 Reasons Why You Should Say ‘YES’ to Salesforce Mobile App

After you have uploaded the image, if you are showing them inside the data table, then, 

<div class="slds-border_right slds-border_left">
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="Title">Title</div>
                </th>
            </tr> 
        </thead>
        <tbody>
            <aura:iteration items="{!v.listContentDoc}" var="CD">
                <tr>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.Title}">
                            <!--store contentDocument Id in data-Id attribute-->
                            <a onclick="{!c.getSelectedFile}" data-Id="{!CD.Id}">{!CD.Title}</a>
                        </div>
                    </th>
                </tr> 
            </aura:iteration>
        </tbody>
    </table>
</div>

On the file name click, you will them show the preview, which will be opened inside modal, for this, you have to use:

For file Preview:

<!--###### FILE PREVIEW MODAL BOX START ######-->
<aura:if isTrue="{!v.hasModalOpen}">
    <section onclick="{!c.closeModel}"
            role="dialog"
            aria-modal="true"
            class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__content slds-p-around_medium slds-text-align_center" style="background: transparent;">
                <div style="width: 50%; margin: 0 auto; text-align: left">
                    <!--<lightning:fileCard> to preview file using content document Id -->
                    <lightning:fileCard fileId="{!v.selectedDocumentId}"/>
                </div>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
<!--###### FILE PREVIEW MODAL BOX END ######-->

Check out another amazing blog by Krati here: Send .csv File to Another Org in Salesforce

Controller:

/**Open image preview */
getSelectedFile : function(component,event,helper){
    // display modle and set seletedDocumentId attribute with selected record Id  
    component.set("v.hasModalOpen" , true);
    component.set("v.selectedDocumentId" , event.currentTarget.getAttribute("data-Id"));
},
/**Close preview */
closeModel: function(component, event, helper) {
    // for Close Model, set the "hasModalOpen" attribute to "FALSE" 
    component.set("v.hasModalOpen", false);
    component.set("v.selectedDocumentId" , null);
},