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

Question

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

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

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

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

2. 我将其添加到index.js文件的顶部：

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

3. 我background-image在我的CSS中添加了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

我遇到了同样的错误。经过一番调查，我发现我添加了另一个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
            }
          }
        ]
      }

所以你可能还添加了一些额外的加载器来同时处理svg文件，请检查。