将React Photo Gallery与图像文件一起使用，而不是URL中的图像

Question

我正在尝试在我的React应用程序中将以下软件包用于图片库：

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

我拥有的图像不是来自某些URL，如本示例所示：

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

我试图将它们存储在我的react应用程序的文件夹中，并保存它们的列表，然后将此列表作为参数发送给Gallery，但是Gallery不会仅从URL图像显示这些图像。

列表示例，仅显示来自URL的第一张图像：

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;

这是我的应用程序中的外观：

在DOM中生成的源URL：

Answer 1

我找到了解决方案，阅读更多内容后，我发现使用create-react-app时必须使用import（或require），并且不能直接使用img src =“ ...”。因此，我将图像列表进行了编辑，使其类似于以下代码，现在可以使用了：

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;