Images not working locally / Resolving to directory

I am working on a project with another developer. On their local environment images are working fine however on my environment images donā€™t show, just the little broken page icon the browser displays when a link does not resolve. I right clicked on the missing image icon and clicked ā€œOpen Image in New Tabā€ on chrome and to my surprise, the link resolves to something like: http://127.0.0.1/D:/Documents/GitHub/siteDir/media/pages/home/story-collection/6cb1e341d7-1605159366/83549519_533080560636238_7144643456169379245_n.jpg. This is weird because the src attribute in the img tag points to home/story-collection/83549519_533080560636238_7144643456169379245_n.jpg

I canā€™t figure out whatā€™s going onā€¦ stylesheets and theme assets are displaying properly but images in a page do not resolve to the proper url when accessed by the browser.

How are the URLs added in the template, please post example code. Image URLs should point to the media folder.

The image urls are being added using:

$page->content()->files()

I donā€™t understand. Please provide more context, not just a single line of code. So that code is inserted in the image src attribute? That doesnā€™t make sense.

As URL is created like this (example get first file from page folder

if ( $file = $page->file() ) {
  echo $file->url();
}

So I guess $page->content()->files() is supposed to get files from a field called files?