Using React Photo Gallery with images files instead of images from URL

Question

I am trying to use the following package for image gallery in my react app:

https://github.com/neptunian/react-photo-gallery

The images that I have are not from some URL, as shown in this example:

https://codesandbox.io/s/awesome-bassi-5vn3lvz2n4?from-embed=&file=/index.js:204-210

I tried to store them in a folder in my react application, and save a list of them and send this list to the Gallery as parameter, but the gallery doesn't display those images, only from URL images.

example of the list, Only the first image that is from URL is getting shown:

const photos = [
    {
        src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
        width: 4,
        height: 3
    },
    {
        src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschGBH11de.jpg",
        width: 4,
        height: 3
    },
    {
        src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschHammer11.png",
        width: 1,
        height: 1
    },
    {
        src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschHammerRental.jpg",
        width: 3,
        height: 4
    }
];

export default photos;

this is how it looks in my app:

Source URL that is generated in the DOM:

Probably an error with your bundler config (eg webpack or other) on your assets path. — Striped, May 12 '20 at 16:02
I tested the path by regular importing the image and showing it, and the path is ok... — Yuval Levy, May 12 '20 at 16:23
What is the src url in the generated DOM when you inspecting your app ? — Striped, May 12 '20 at 16:27
I have edited the question and added a picture with the URL from the DOM — Yuval Levy, May 12 '20 at 16:44
just tried, still not working, I've updated the picture in the question — Yuval Levy, May 12 '20 at 16:51
I created the app by using "create-react-app" so I think that it has webpack as default, right? — Yuval Levy, May 12 '20 at 17:00
The assets doc for create-react-app is [here](https://create-react-app.dev/docs/using-the-public-folder/), sorry for not helping.. — Striped, May 12 '20 at 17:04

score 1 · Answer 1 · answered May 12 '20 at 17:26

I found a solution, after reading more I discovered that when using create-react-app you must use import (or require) and can't use img src="..." directly. So I have edited the list of images to be like the following code, and now it work:

import BoschGBH11de from './BoschGBH11de.jpg';
import BoschHammer11 from './BoschHammer11.png';
import BoschHammerRental from './BoschHammerRental.jpg';

const photos = [
    {
        src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
        width: 4,
        height: 3
    },
    {
        src: BoschGBH11de,
        width: 4,
        height: 3
    },

    {
        src: BoschHammer11,
        width: 1,
        height: 1
    },
    {
        src: BoschHammerRental,
        width: 3,
        height: 4
    }
];

export default photos;

Using React Photo Gallery with images files instead of images from URL

1 Answers1