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

2023年4月10日 212次阅读

我做了一个日期选择器反应,我正在尝试将其上传到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(未找到)

它看起来像是在项目的根目录中而不是在模块本身中查找imgs目录,但我不确定如何解决这个问题.

最佳答案 我可能会在编译之前使用
webpack来简单地要求数据：

const data = require('../imgs/arrow.svg');

<object style={STYLES.arrow} data={data} type="image/svg+xml" />

您将需要执行npm install –save-dev webpack url-loader或类似的东西. webpack文档应该让您知道您需要什么(上面链接).

你的问题是它试图在运行时找到数据路径,当更好的是它在编译时找到数据路径.

点赞