Loading Images In reactjs using nodejs

Question

I'm trying to load images stored in my database folder using this code:

<Carousel autoplay>
            {props.images.map((image, index) => (
                <div key={index}>
                    <img style={{ width: '100%', maxHeight: '150px' }}
                        src={`http://localhost:5000/${image}`} alt="productImage" />
                </div>
            ))}
        </Carousel>
    </div>

But I'm Getting this error: error

Images stored in database are like this:

{
          "images": [
            "uploads\\1596557942509_discount.png"
          ],
          "categories": 3,
          "_id": "5f298a8f205d0e109c896979",
          "productname": "Justchecking",
          "price": "444",
          "shopadress": "Checking",
          "contactdetails": "9999999",
          "createdAt": "2020-08-04T16:19:27.168Z",
          "updatedAt": "2020-08-04T16:19:27.168Z",
          "__v": 0
        },

How are you fetching your array? – user992731 Aug 06 '20 at 18:16 — user992731, Aug 06 '20 at 18:16

score 0 · Answer 1 · answered Aug 06 '20 at 18:24

if you use folder on Node.js backend, you should set up serve static

If the serve static have been set up, check if the link to the static is correct.

Also, check if the links in images array is correct (especially the two backward slashes)

Finally, the error tells that the images not found, so before you will paste it to react, try to paste the absolute image URL to browser and check it. If you will fix the problems mentioned above, it should work

score 0 · Answer 2 · answered Aug 06 '20 at 18:26

I have tried your code in editor and the urls which are getting formed are shown in output. Please try to open the image in the browser and if that is not working, then correct the path and try.

The error that is coming is because your image path is not correct.

["uploads\\1596557942509_discount.png", "uploads\\1596557942509_discount.png"].map((image, index) => (
                console.log("http://localhost:5000/" + image)
            ))

Output of your images are:

"http://localhost:5000/uploads\1596557942509_discount.png"
"http://localhost:5000/uploads\1596557942509_discount.png"

score 0 · Answer 3 · answered Aug 06 '20 at 19:13

My guess is you use Webpack for bundling. Webpack needs to "require" dynamics paths for image source due to its internal module management flows. Here is a good sample of a similar implementation. And I think this and this will help you to get closer to the root of the problem. There is another point worth noticing. Using an array index as "key" for child components is an anti-pattern as explained here. You can reuse component ids for keys.

Ankush Verma · Answer 4 · 2020-08-07T02:37:46.583

I don't get how your image is stored? Is only the name being stored and you are saving it to your server?
Perhaps try multer and sharp to convert image to buffer and then retrieve it .

<img src={bufferImage!=''?`data:image/jpeg;base64,${bufferImage}`:"https://reactbootstrap.netlify.app/logo.svg"} />

user multer and sharp at the backend. so perhaps rather than saving uploads\\1596557942509_discount.png it would be better to have something like
{ uploads\\1596557942509_discount.png : daskdas... }

Loading Images In reactjs using nodejs

4 Answers4