Newly uploaded photo giving 404 error. If I stop then run website, image loads

We are trying to create a photo gallery on our website. We have an upload component on the admin side and a photo gallery on the client-side. We are able to upload photos to our website and are currently storing them in a folder in the assets of our website. When we upload a new photo, sign out of the admin portal and then try and view the photos in the gallery, the newly uploaded photo gives us an error: GET https://localhost:5001/assets/PhotoGallery/DarkSide.jpg 404 even though we are able to display the path of the file in the console as text and it is the correct path.

If we stop the website from running, and then launch it again, the photo will display. We are not sure why this is happening but any help would be appreciated. Thank you.

photos.component.ts

catcher: any[];
  photos: string[] = [];


  async ngOnInit() {
    await this.http.get<any[]>(this.baseUrl + 'api/imageUpload').subscribe(result => {
      this.catcher = result;
      this.setPhotos(result);
      console.log(result);
    }, error => console.error(error));
  }

  setPhotos(newArray: any[]) {
    var temp: string = ""
    newArray.forEach(path => {
      this.photos.push("..\\" + path.trim())
    });
  }

imageUploadController.cs

private IHostingEnvironment _hostingEnvironment;
        private string fPath = "";
        public imageUploadController(IHostingEnvironment hostingEnvironment)
        {
            _hostingEnvironment = hostingEnvironment;
            SetFullPath(_hostingEnvironment.ContentRootPath + "\\ClientApp\\src\\assets\\PhotoGallery");
        }

[HttpGet, DisableRequestSizeLimit]
        public List<string> GetImagePaths()
        {
            try
            {
                List<string> paths = new List<string>();
                string startRelPath = "assets";
                foreach (var path in Directory.GetFiles(fPath))
                {
                    int relPathStartIndex = path.IndexOf(startRelPath);
                    string newPath = path.Substring(relPathStartIndex);
                    Console.WriteLine(newPath);
                    paths.Add(newPath);
                }
               return paths;
            }
            catch(Exception e)
            {
                Console.WriteLine("Fail");
                return null;
            }
        }

private void SetFullPath(string path)
        {
            this.fPath = path;
        }

photos.component.html

<div *ngIf="photos?.length">
    <div *ngFor="let photo of photos">
        <img src="{{photo}}"/>
    </div>
</div>

I wound up resolving this issue by using an S3 bucket, I realized once I put my website on a server I would no longer be able to access the file paths to store the photo. The tutorials I followed to resolve my issue are here:

Part 1: https://youtu.be/ynhgDYVQTEI
Part 2: https://youtu.be/hJFxhVpA9To
Part 3: https://youtu.be/eRUjPrMMhCc