时间戳

首页 > 解决方案 > React JS 的路径名字符串问题

node.js - React JS 的路径名字符串问题

问题描述

根据路径名的存储方式，我无法在 Node JS 中正确加载文件。

{
  Object.entries(LEGEND).map(([key, value]) => {
    return (
      <div key={"layout-editor-element-" + key}>
        <Card
          className="text-center"
          align="center"
          tag="a"
          title={value.desc}
          onClick={() => this.generateItem(key)}
        >
          <Card.Body>
            <Card.Img
              variant="top"
              src={require(`../assets/icons/simpleText-Icon.png`)}
              className="card-images"
            />
            <Card.Text>{value.title}</Card.Text>
          </Card.Body>
        </Card>
      </div>
    );
  });
}

工作正常，但更改为

<Card.Img variant="top" src={require (value.iconName)}

给我一个控制台错误

未捕获的错误：找不到模块“../assets/icons/simpleText-Icon.png”

地图中的其他值加载正常，即使我声明类似

const pathname = "../assets/icons/simpleText-Icon.png"

然后使用

<Card.Img variant="top" src={require(pathname)} className="card-images"/>

我犯了同样的错误。

它是相同的路径名字符串，但是当您尝试替换常量时显然会发生一些变化，尽管我对它可能是什么感到困惑。

有没有人有想法，或者一些解决方法/替代方法可以让它根据地图有选择地加载图像？

标签： node.jsreactjsnpm

解决方案

打包程序无法处理动态要求。

您可以做些什么来解决这个问题，而不是将字符串存储../assets/icons/simpleText-Icon.png在 中value.iconName，您可以将完整的 require 表达式存储为键的值：

iconName: require('../assets/icons/simpleText-Icon.png')

推荐阅读