如何在 Webpack 中加载 SVG 图片? [英] How to load SVG images in Webpack?

问题描述

我想在 Webpack 中使用 svgo-loader 加载 SVG 文件，但出现以下错误:

I'd like to load SVG files using svgo-loader in Webpack, but I get the following error:

./~/css-loader?modules&localIdentName=[name][local][hash:base64:5]!./~/autoprefixer-loader! 中的错误./~/less-loader!./demo/src/components/App/components/Header/Header.less找不到模块:错误:无法解析/Users/mishamoroshko/react-autosuggest/demo/src/components/App/components/Header 中的模块logo.svg"@ ./~/css-loader?modules&localIdentName=[name][local][hash:base64:5]!./~/autoprefixer-loader!./~/less-loader!./demo/src/components/App/components/Header/Header.less 6:199-218

ERROR in ./~/css-loader?modules&localIdentName=[name][local][hash:base64:5]!./~/autoprefixer-loader!./~/less-loader!./demo/src/components/App/components/Header/Header.less Module not found: Error: Cannot resolve module 'logo.svg' in /Users/mishamoroshko/react-autosuggest/demo/src/components/App/components/Header @ ./~/css-loader?modules&localIdentName=[name][local][hash:base64:5]!./~/autoprefixer-loader!./~/less-loader!./demo/src/components/App/components/Header/Header.less 6:199-218

./demo/src/components/App/components/Header/Header.less 中的错误模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析/Users/mishamoroshko/react-autosuggest/demo/src/components/App/components/Header

ERROR in ./demo/src/components/App/components/Header/Header.less Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve module 'logo.svg' in /Users/mishamoroshko/react-autosuggest/demo/src/components/App/components/Header

这是相关的代码位:

Webpack 配置

module: {
  loaders: [
    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]!autoprefixer!less'),
      exclude: /node_modules/
    },
    {
      test: /\.svg$/,
      loader: 'url?limit=8192!svgo'
    },
    ...
  ]
}

package.json

"svgo": "^0.6.1",
"svgo-loader": "^1.1.0",
"url-loader": "^0.5.7",
...

Header.less

.logo {
  background-image: url(./logo.svg);
}

logo.svg 和 Header.less 位于同一目录中.

logo.svg and Header.less are located in the same directory.

我在这里遗漏了什么?

复制:

1. git clone [e-mail]:moroshko/react-autosuggest.git
2. cd react-autosuggest
3. git checkout a5f1a99
4. npm install
5. npm start

推荐答案

这个 css-loader 问题 似乎相关.

This css-loader issue seems related.

作为一种解决方法，更改:

As a workaround, changing:

background-image: url(./logo.svg);

到:

background-image: url(../parent-folder/logo.svg);

解决错误.

这篇关于如何在 Webpack 中加载 SVG 图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！