Question

我的代码中存在一个怪异的错误，如果我动态生成源路径，则无法从文件夹导入图像。如果我直接将源代码键入为String，那么即使HTML图像标签收到的实际参数在两种情况下应该相同，它也可以工作。

我想在我的React App中动态显示图像。这些图像由Python脚本创建。我有一些按钮可以让我选择不同的日期，对于这些日期中的每个日期，都将显示特定的图像。

图像被像这样分类到文件树中：

img/<year>/<month>/<day>/<time&name>

对于给定的日期，应显示相应文件夹中的所有图像。由于'fs'模块与React不兼容，我决定让我的Python脚本还创建一个JSON文件，该文件反映了img文件夹的结构。我将其命名为“ fStructure”。这使我知道哪些图像在哪个文件夹中，因此应该导入或不应该导入和显示。

我的React组件如下所示：

import React from 'react';
import fStructure from '../../../data/extracted/photos/file_structure.json';

const Page = (year, month, day) => {
  const photosLoc = '../../../img/' +  year + '/' + month + '/' + day + '/';

  let photos = '';
  for (let i of fStructure[year][month][day]) {
    const imgSrc = require(photosLoc + i);
    photos += <img src={imgSrc} />;
  };

  return (
    <div>{photos}</div>
  );
};

也许我还不清楚我要去哪里，但是现在重要的是我遇到了以下错误：

Error: Cannot find module '../../../img/2019/9/2/11h-01m-11s_IMG_1242.jpg'

有趣的是，如果我现在仅复制此图像的路径，将其粘贴到我的项目中

const imgSrc = require('../../../img/2019/9/2/11h-01m-11s_IMG_1242.jpg')

它可以毫无问题地编译并显示图像。

如果以字符串形式给出源代码，为什么能正常工作，但是如果我动态生成源代码却不能，那么为什么呢？最后，给HTML标记的源代码应该相同，位于至少那是我的理解。提前非常感谢您的帮助。

从文件夹导入图像时“ require”命令的奇怪行为

0 个答案: