时间戳

首页 > 解决方案 > reactjs - 使用 svg 对象运行构建错误

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

问题描述

我正在尝试构建一个具有一些 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 run 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

标签： reactjssvgbuild

解决方案

这是 require 的错误用法，它试图将 logo/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。

推荐阅读