如何在 React Component NPM 模块中引用图像？

Question

我在 React 中制作了一个日期选择器，我正在尝试将它上传到 NPM，它使用外部 svg，但我无法正确引用该 svg。

所以我的文件目录如下所示：

+-- imgs
|   +-- arrow.svg
+-- src
|   +-- Datepicker.jsx
|   +-- index.js

然后在 Datepicker.jsx 我有
<object style={STYLES.arrow} data="../imgs/arrow.svg" type="image/svg+xml" />

但是当我通过 npm 安装它并尝试在项目中使用它时，它说：
GET http://localhost:8000/imgs/arrow.svg 404 (Not Found)

看起来它正在项目的根目录而不是模块本身中寻找 imgs 目录，但我不知道如何解决这个问题。

Answer 1

我在react中做了一个日期选择器，我试图将其上传到NPM，它使用了一个外部svg，但是我在正确地引用该svg时遇到了麻烦。

所以我的文件目录如下所示：

+-- imgs
|   +-- arrow.svg
+-- src
|   +-- Datepicker.jsx
|   +-- index.js

然后在Datepicker.jsx中，我有
<object style={STYLES.arrow} data="../imgs/arrow.svg" type="image/svg+xml" />

但是，当我通过npm安装它并尝试在项目中使用它时，它说：
GET http://localhost:8000/imgs/arrow.svg 404 (Not Found)

看起来它正在项目的根目录中而不是在模块本身中寻找imgs目录，但是我不确定如何解决此问题。

Answer 2

我在react中做了一个日期选择器，我试图将其上传到NPM，它使用了一个外部svg，但是我在正确地引用该svg时遇到了麻烦。

所以我的文件目录如下所示：

+-- imgs
|   +-- arrow.svg
+-- src
|   +-- Datepicker.jsx
|   +-- index.js

然后在Datepicker.jsx中，我有
<object style={STYLES.arrow} data="../imgs/arrow.svg" type="image/svg+xml" />

但是，当我通过npm安装它并尝试在项目中使用它时，它说：
GET http://localhost:8000/imgs/arrow.svg 404 (Not Found)

看起来它正在项目的根目录中而不是在模块本身中寻找imgs目录，但是我不确定如何解决此问题。

Answer 3

创建一个分离的组件：

export function BaseIcon(props: any) {
  return (
    <div>
      <img
        src={
          require(`../node_modules/cryptocurrency-icons/svg/color/${props.name}.svg`)
            .default.src
        }
      />
    </div>
  );
}

并且从组件中，您可以通过传递名称直接访问它

<BaseIcon name={item.name} />

几乎没有解释什么require( ../node_modules/cryptocurrency-icons/svg/color/${props.name}.svg )返回，这是一个对象， default属性之一。 有时，在答案中，您可以在最后看到default 。 我相信这不仅限于cryptocurrency-icons ，这是在寻找解决方案时得出的结论。 在我的情况下， default是一个对象，它具有src键和源文件的直接路径。

不需要额外的依赖项，至少在Next.js ，比如url-loader ，是需要的。