GitHub images not loading on pages

Question

I created a project and uploaded the images of project to the repository.i used a div and HTML IMG tag to display image in README.md file. I provided the url of my images in repository to IMG tag. I am able to see images being loaded in preview of pages in my repository but I can't see the images on the hosted GitHub pages. I tried the same code for another markdown file in one of my other project and it works perfectly.

Below project details

The code I used to load images in README.md:

<div style="display: flex; justify-content: space-between;">
  <img src="https://github.com/Malhar-Girgaonkar/Song-Inventory-code/blob/main/Demo/Mainpage.png" alt="Mainpage" width="400" height="300"/>
  <img src="https://github.com/Malhar-Girgaonkar/Song-Inventory-code/blob/main/Demo/Database.png" alt="Database" width="400" height="300"/>
</div>

Image folder link : click here

My project repository: click here

Project GitHub page: click here

Project I used same code at but is working perfectly is given below

Code I used to load images in README.md and works :

<div style="display: flex; justify-content: space-between;">
  <img src="https://raw.githubusercontent.com/Malhar-Girgaonkar/M.U.R.A.L/master/App%20data/Demo/Application%20Screenshot/Screenshot%202024-02-04%20003258.png" alt="Mainpage 1" width="400" height="300"/>
  <img src="https://raw.githubusercontent.com/Malhar-Girgaonkar/M.U.R.A.L/master/App%20data/Demo/Application%20Screenshot/Screenshot%202024-02-04%20003434.png" alt="Mainpage 2" width="400" height="300"/>
</div>

Image folder link : click here

Project repository : click here

Project GitHub page : click here

Your help would be appreciated. :)

I tried changing path in IMG tag to absolute link then raw link but problem of images loading in preview and not on actual page still persists.