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

How to reference image in React Component NPM module?

本文关键字：模块 引用 图像 NPM Component React      更新时间：2023-09-26

我在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目录，而不是在模块本身中，但我不知道如何解决这个问题。

在编译之前，我可能会使用webpack来简单地require数据：

const data = require('../imgs/arrow.svg');
<object style={STYLES.arrow} data={data} type="image/svg+xml" />

您将需要执行npm install --save-dev webpack url-loader或类似操作。webpack文档应该让您知道您需要什么（链接到上面）。

您的问题是，它试图在运行时找到数据路径，而对它来说，更好的方法是在编译时

接受的答案在这里真的帮助了我，只是想展示我是如何让它为我工作的。我有几个React项目需要共享一个组件，所以我在自己的独立库中构建了该组件。最初，我通过"；典型的"；src方法，其中这些静态文件是从公共目录（如<img src='icons/down-arrow.svg' />）中获取的，但正如OP所指出的，当库导入到父项目中时，这不起作用，因为父项目最终会根据自己的根目录而不是库的根目录来查找图标。

导入这些图标并将这些导入设置为src属性就完成了任务-

// src/components/component.js
import React from 'react';
import downArrow from '../../../public/icons/down-arrow.svg';
import rightArrow from '../../../public/icons/right-arrow.svg';
const MyComponent = (props) => {
    const icon = props.selected ? downArrow : rightArrow;
    return (
        <div>
            <img src={icon} />
        </div>
    );
};
export default MyComponent;

在这种情况下，组件将位于/src/components/component.js，其中一个图标将位于/public/icons/down-arrow.svg

或者，您可以在Webpack配置中别名public目录，就像一样

// ...
    resolve: {
        alias: {
            public: path.resolve(__dirname, 'public/')
        }
    },
// ...

并从导入路径中删除前导../。

创建一个分离的组件：

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/ccryptocurrencyicons/svg/color/${props.name}.svg )返回一个对象，这是default的属性之一。有时，在答案中，你可以看到末尾的default。我相信这不仅仅局限于cryptocurrency-icons，这是在寻找解决方案时得出的结论。在我的例子中，default是一个对象，它具有指向源文件的直接路径的src密钥。

不需要额外的依赖项，至少在Next.js上是这样，就像url-loader一样。

相关文章：