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

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:

Answer 1

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;