Search code examples
reactjsfile-upload

How can I access an image file outside of the public folder in React?

I am new to React and I am trying to build a shopping website using Asp.Net Core and React. So I want to use product images from a folder in the Asp.Net side.

I tried to declare a constant variable called "Path" and gave the path of the outside folder:

this.state = {
        Path: '/Users/username/workSpace/site/asp_net-website-sh/asp_net-website-sh/ProductPhotos/'
    }

Then I simply tried to use it like that:

<CardItem src={Path+pro.ProductPhotoName} ... />

But it didn't work...

I also tried moving image file first to public/images/, then to public. It worked fine for both but when I tried to move it to out of the public folder it cannot acces the image:

Path: '/../../asp_net-website-sh/asp_net-website-sh/ProductPhotos/'

I've searched on Google but I couldn't find anything useful. Is there any way to make this happen? If not, what would you suggest? Should I upload all the images in public folder?

Solution

  • Alright, I solved the problem by using server url for the photos:

    PhotoPath: 'https://localhost:<PORT>/ProductPhotos/'
<CardItem src={PhotoPath+pro.ProductPhotoName} ... />