Using local image in an array, React

1

Hello everyone, I am having an unusual issue with my project.
I am trying to have the url of images in my state point to a folder on my machine, but no matter what I type I can’t get the image to show up.
This is what all my state items look like
Here is my full project on code sand box:


Can anyone tell me what I am doing wrong here? 
{
          title: 'Neolithic Rock art',
          imageUrl: "./itemphotos/stoneage/art.jpg",
          price: '$300',
          id: 1,
          desc: "Own a (reproduction) priceless piece of human history. "
        },

Thanks in advance.

2

Displaying image is also a http request. So, you cannot use relative path with respect to your code file. The relative path should be relative to public directory as your index file is there. So, your image should be available at “public/itemphotos/stoneage/art.jpg” and you can refer to it using relative link “/itemphotos/stoneage/art.jpg” which will translate to “http://yoursite.com/itemphotos/stoneage/art.jpg”

3

You can’t access a local filesystem from a remote browser client, you aren’t going to be able to do what you’re trying to do. You need to have the images hosted somewhere, either local to the app on CodeSandbox (ie in a folder in that project) or on a server somewhere (eg a CDN like cloudinary)

4

Sorry I wasn’t clear. The codesandbox was just there for others to see the full code. I am doing this one my local machine and have all the images in a folder.
@4slimbu
So i tried the “/itemphotos/stoneage/art.jpg” but still the image isn’t loading. I put the itemphotos folder into the public folder but still the code can’t find the image.
Sorry for the late replies, I had to stay late at work.

5

{
title: “Neolithic Rock art”,
imageUrl: “/logo192.png”,
price: “$300”,
id: 1,
desc: "Own a (reproduction) priceless piece of human history. "
}

This works because there is “logo192.png” in your “public” folder.
So what I mean is that you need to copy your images to public folder for relative link to work. Remember: Public directory is your root directory for other people or browser accessing your site.

If it still won’t work. Then there might be other issues. Try inspecting the code and see what’s showing in the img source in the browser. You will have some clue.

6

Thanks for your help. You helped me to find the solution.
I’m posting this in case someone else has the same issue.
My problem was that I was routing the props of the array through a separate component that was building the html. Something was going wrong and it was having the img src as undefined.
To fix I just put the HTML manually into my page. It will be more work and I won’t be able to change all of them with one edit like I was planning, but working code is always better.