Question

我正在尝试构建一个带有一些svg徽标的reactjs项目。

我已经在这样的组件中添加了svg徽标

    <div className="brand-logo">
      <img className="plus" src={require(`logo/S&N_Plus.svg`)}  />
      <img className="smith" src={require(`logo/S&N_Smith.svg`)}  />
      <img className="nephew" src={require(`logo/S&N_Nephew.svg`)}  />
    </div>

当我这样做时-npm运行build

我收到此错误

λ npm run build

> my-app@0.1.0 build D:\wamp\www\reactscrollproject\reactscrollproj\my-app2
> react-scripts build

Creating an optimized production build...
Failed to compile.

.\src\components\Section.js
Cannot find module: 'logo/S&N_Plus.svg'. Make sure this package is installed.

You can install this package by running: npm install logo/S&N_Plus.svg.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Rob\AppData\Roaming\npm-cache\_logs\2019-06-25T22_47_42_749Z-debug.log

Answer 1

这是require的错误用法，因为您未指定相对目录，所以它试图将徽标/S&N_Plus.svg视为名称空间/模块。

您的svg存储在哪里？

如果静态资产存储在public / assets文件夹中，则有不同的引用方式。

例如：

使用环境变量：

<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

使用全局常量

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

使用相对进口

import logo from './logo.png';
...
return <img src={logo} alt="Logo" />;

还有https://www.npmjs.com/package/svg-inline-react之类的一些帮助程序库，它们可以更好地控制/操纵嵌入式svg。

reactjs-使用svg对象运行构建错误

1 个答案: