1

所以早些时候在尝试启动开发服务器以查看我的 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）不再呈现（而是显示破碎的图标）。

这就是我显示图像的方式：

成员.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" />
    )
}

并将它们显示在组件的 return() 函数内的 div 元素中...

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

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

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

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

编辑：澄清：这是项目的文件夹结构。

4

0 回答 0