when page is loading how to put image in place of spinner anybody worked could you please share lightnig component and how to use this component into another component

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute type="Integer" name="Logos"/>
    <aura:attribute name="width" type="Integer" default="32" />
    <aura:attribute name="height" type="Integer" default="32" />
    <aura:attribute name="showimage" type="Boolean" default ="false"/>
    <aura:handler event="aura:waiting" action="{!c.showimages}"/>
    <aura:if isTrue="{v.showimage}"> 
    <div aura:id="showimageId" class="slds-spinner_container">
         <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
         <span class="slds-assistive-text">Loading</span>
         <div class="slds-spinner__dot-a"></div>
         <div class="slds-spinner__dot-b"></div>
       </div>
       </div>
    </aura:if>
    <aura:handler name="init" align="center" value="{!this}" action="{!c.doInit}"/>
    <div class="logo cVGA_Loadingimage" data-aura-rendered-by="6:0" data-aura-class="cVGA_Loadingimage" style="
   height: 100vh;
   position: relative;
">
        <img src="/resource/1528440018000/vwlogo" data-aura-rendered-by="7:0" style="
   position: absolute;
   /* margin: auto; */
   left: 40%;
   right: -40%;
   top: 40%;
   bottom: -40%;
">
        </img>
    </div>
    </aura:component>