how to load image outside src and public folders in react

Question

I want to reference my img tag src to the outside of the app, for instance from a local hard disk is it possible? in addition, in restful API how should reference img src to backend upload image folder.

Answer 1

If you reference an image outside of the app, you will be constrained to use full URL with domain (ex: https://google.com/your-path ).

In the case of an API, you can either use the full URL, or you can pass only the relative path (/your-path) and add the domain ( https://google.com ) as a variable in your frontend file (for example by fetching it from environment vars).

Answer 2

On your hard drive you can simply use something like

<img src={"../path/pictures/image.jpg"} />

With an API, you need to get the data and an url from where your image is stored. Be it on the local hard drive of your server (which means you need to do something on your backend to serve the images) or a https:// url.

Once you fetch your data from the backend, you can simply reference it in the <img/> balise.

<img src={state.url} />

If you're using Create-react-app you could learn here

Answer 3

well, I solve problem. in fact i convert imag file to strng like this:

String filePath = HostingEnvironment.MapPath(@"~/Images/"); //read file from directory

var imageString = System.IO.File.ReadAllBytes(filePath + obj.foodImage); // read file as string

 Transfer.Image  = imageString; // and pass to byte variable