将React应用导出为包含SVG图片的npm模块时出现问题

时间:2019-06-11 10:58:57

标签: reactjs npm create-react-app

我有一个用create-react-app创建的React应用程序。我已经将其构建并发布为npm模块。一切正常,我可以使用导出的组件等。我遇到的一个问题是,在我的情况下,图片(SVGs)不会在导入该模块的应用程序中显示。

下图显示了导出并作为npm模块发布的项目的文件夹结构。

Folder structure in the project being exported as npm module

下图显示了在项目中使用时导入的模块的文件夹结构。

enter image description here

下图显示了我导出的组件。

enter image description here

下图显示了已编译的导出组件。

enter image description here

下图显示了导入模块的项目中正在使用的以上组件。

enter image description here

下面的图片显示了导入模块的应用程序无法渲染图片。

enter image description here

enter image description here

你们是否知道为什么图片无法正确加载?

1 个答案:

答案 0 :(得分:0)

我认为这是因为SVG导入错误 每个docs都需要导入SVG,例如:

import { ReactComponent as Logo } from './udilia-logo.svg';

也可能是由于react-create-app的版本错误

  

此功能在react-scripts@2.0.0和更高版本以及react@16.3.0和更高版本中可用。