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

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

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

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

  2. 0

    I suggest you just include your "ProductPhotoName" straight into the path (if it’s a constant), and then you can import the images like this:

    import someImage from '../imagesFolder/img.png';

    And then use them in JSX like this:

    <img src={someImage} />

    The import path is relative to the current file. Do not use absolute paths for better compatibility.

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

Back To Top
Search