Accessing images in React that are outside of project folder on local

Question

I'm working on a web app with a React front end with a .NET web API back end. The app will have a large number of user uploaded images. It doesn't seem logical to me to store these images within the React project folder, I'll probably end up using Azure Blob storage.

My question is how do I simulate this on my localhost during development?

How can I access images from a directory outside of the React project folder?

Once on production it will get the image URI of the cloud storage directory but is there a way to simulate this during development on my local machine? I guess I could setup the cloud storage account now, but was hoping to save some $$$ and not do that until the app is closer to completion.

Answer 1

Create folders call Resouces/Images to store images:

In your Program.cs

var app = builder.Build();

// Configure the HTTP request pipeline.

app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "Resources/Images")),
    RequestPath = new PathString("/Images")
});

Now you can serve your local images through http://localhost:<development-port>/Images/<ImageName>. E.g: Mine is: http://localhost:5296/Images/image1.jpg

In your controller where you supposed to return the image URLs from a blob storage, return these local urls instead.