How to add images to lightning salesforce page?

Hello Shariq,

$Resource
The $Resource global value provider lets you reference images, style sheets, and JavaScript code you’ve uploaded in static resources.
Using $Resource lets you reference assets by name, without worrying about the gory details of URLs or file paths. You can use $Resource in Lightning components markup and within JavaScript controller and helper code.

Using $Resource in Component Markup
To reference a specific resource in component markup, use $Resource.resourceName within an expression.resourceName is the Name of the static resource. In a managed packaged, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, that’s all you need. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation. Here are a few examples.

<aura:component>
<!-- Stand-alone static resources -->
<img src="{!$Resource.generic_profile_svg}"/>
<img src="{!$Resource.yourNamespace__generic_profile_svg}"/>

<!-- Asset from an archive static resource -->
<img src="{!$Resource.SLDSv2 + '/assets/images/avatar1.jpg'}"/>
<img src="{!$Resource.yourNamespace__SLDSv2 + '/assets/images/avatar1.jpg'}"/>
</aura:component>