Question 371322 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    Create some simple server side app locally with endpoint to images which will send files from your folder?

    I have used similar solution for react+node.js app and have been accessing those photos by putting "/api/images/:id" string in <img src/> or background-image attribute for divs.

    Login or Signup to reply.
  2. 0

    Create folders call Resouces/Images to store images:

    folder structure

    In your Program.cs

    var app = builder.Build();

// Configure the HTTP request pipeline.
app.UseStaticFiles();
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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search