Question

在Webpack工作流程中使用SVG时遇到很多麻烦。我正在尝试使其与CSS中的background: url(sample.svg)属性一起显示。单独使用它是行不通的，因此我认为我已经使用了装载程序。这是我使用的步骤。

我使用svg-url-loader加载了SVG。

1。我通过npm安装了svg-url-loader，并将其添加到了module.exports中：

 {
        test: /\.svg/,
        use: {
            loader: 'svg-url-loader'
        }
      },

2。我将此添加到了index.js文件的顶部：

require('svg-url-loader!./images/topography.svg');

3。我在CSS上添加了background-image和SVG路径：

body {
  background-image: url("../images/topography.svg");
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  background-attachment: fixed;
  letter-spacing: -1px;
}

4。。SVG未呈现到页面上。当我在浏览器中检查身体时，会发现：

background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);

我对data-uri不太了解，所以也许我在那里遇到了问题。

此外，我已经使用其他SVG文件尝试了此操作，但是它们都没有起作用。

Answer 1

我遇到了同样的错误。经过一番调查后，我发现我添加了另一个<mat-form-field floatLabel="never"> <input matInput aria-label="salesRepresentative" type="text" [placeholder]="translationObj.startTypingPlaceholder" autocomplete="off" [formControl]="autoCompleteControl" [matAutocomplete]="auto"> <mat-icon matSuffix class="cursor-pointer">search</mat-icon> <mat-autocomplete #auto="matAutocomplete" [displayWith]="createSalesRepString"> <mat-option *ngFor="let item of salesPickerAutoComplete$ | async;" [value]="item"> {{item.FirstName}} {{item.LastName}} - (Username: {{item.Username}}) </mat-option> </mat-autocomplete> </mat-form-field>加载器，从而导致了此问题，因此我通过删除其他svg加载器来解决了该问题：

svg

因此，您可能还添加了一些额外的加载程序来同时处理{ test: /\.svg/, use: { loader: 'svg-url-loader' } }, { test: /\.svg$/, use: [ "babel-loader", { loader: "react-svg-loader", options: { svgo: { plugins: [{ removeTitle: false }], floatPrecision: 2 }, jsx: true } } ] }文件，请检查。

Answer 2

您可以：

a）在webpack.config.js中设置加载程序：

example.js：

import ExampleIcon from 'assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />

webpack.config.js：

{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: 'react-svg-loader',
      options: {
        svgo: {
          plugins: [{ removeTitle: false }],
          floatPrecision: 2
        },
        jsx: true
      }
    }
  ]
},

b）或在导入字符串中设置装载程序：

import ExampleIcon from '!babel-loader!react-svg-loader!assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />

Answer 3

我也遇到了同样的问题。我们有一个基于 url-loader 和 file-loader 的自定义 url-loader。当 svg 的大小限制在 10Kb 时，它会调用 url-loader 来处理 svg，否则它会调用 file-loader 来处理。看起来没问题，但是捆绑文件显示它被不同的加载器处理了两次。 base64 编码的字符串是通过 module.exports 导出的，但是在页面中路径没有被替换。这是因为我用vue-cli创建项目，svg是由file-loader处理的。当我删除文件加载器的默认配置时，它按预期工作。

使用svg-url-loader在webpack中加载svg

3 个答案: