如何在 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

我可能会在编译之前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文档应该让您知道您需要什么（上面链接）。

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