reactjs - 将 React Photo Gallery 与图像文件一起使用，而不是来自 URL 的图像

Question

我正在尝试在我的反应应用程序中使用以下软件包作为图片库：

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

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

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

我尝试将它们存储在我的反应应用程序的文件夹中，并保存它们的列表并将此列表作为参数发送到画廊，但画廊不显示这些图像，仅来自 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：

标签： reactjsfirebaseimage-galleryphoto-gallery

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;