Question

我已经做出了反应日期选择器，我正在尝试将其上传到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文档应该让您知道您需要什么（上面链接）。

您的问题是它正在尝试在运行时中找到数据路径，当更好的方法是在编译时找到数据路径。

Answer 2

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

导入这些图标并将这些导入设置为 src 属性就行了 -

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;

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

2 个答案: