Question

因此，在尝试启动开发服务器以查看我的React应用程序之前，我开始从 chokidar 和 webpack 接收到多个错误，这些错误是由我管理的用

“修复”

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl --system（ArchLinux系统）

以及使观察者忽略项目的node_modules文件夹，如下所示：

webpack.config.js

watchOptions: {
  ignored: /node_modules/
}

这样做可以让我再次运行该项目，但是在此过程中，我动态导入了一些图像（它们位于 src ，不 中的图像子文件夹中> public ）（不再显示残破的图标）。

这是我显示图像的方式：

Members.js

const Members = [
{
    value: 1,
    color: "yellow",
    name: "AmorAltra",
    role: "Event Host",
    image: require("../../images/skins/amoraltra.png"),
    icon: require("../../images/icons/Amor.png"),
    description: "Hi, Amor here!"
},... 
export default Members

然后将此JSON对象数组导入

Team.js

import Members from "./Members";

随后，我为这些图像创建一个img标签数组...

const renderList = [];

for(let i=0; i<=19; i++) {
    renderList.push(
        <img key={Members[i].value} src={Members[i].icon} alt={Members[i].name} className="icon" />
    )
}

并将它们显示在Component的return（）函数内的div元素中...

return(<div className="select">{renderList}</div>)

这非常有效，直到出现来自chokidar和webpack的错误。我尝试做的一件事是重构要从公共文件夹而不是src加载的图像的链接，但是React根本无法解析文件名或返回

您尝试导入../../ public / images ...

我很困惑这里的问题是什么，尤其是对React整体来说是新手。任何帮助将不胜感激。

编辑：进行澄清：this是项目的文件夹结构。

chokidar错误导致图像无法通过require（）

0 个答案: