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

【问题标题】：Using React Photo Gallery with images files instead of images from URL将 React Photo Gallery 与图像文件一起使用，而不是来自 URL 的图像
【发布时间】：2020-05-12 15:52:09
【问题描述】：

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

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：

【问题讨论】：

您的资产路径上的捆绑程序配置（例如 webpack 或其他）可能有错误。
我通过正则导入图片并显示出来测试了路径，路径没问题...
检查应用时生成的 DOM 中的 src url 是什么？
create-react-app 的资产文档是 here，很抱歉没有提供帮助..
谢谢你的帮助，我找到了解决办法，会贴出来

标签： reactjs firebase image-gallery photo-gallery

【解决方案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;

【讨论】：