使用Webpack在TypeScript React应用程序中导入SVG

Question

我想将SVG图像导入到一个用TypeScript编写并与Webpack捆绑在一起的React小应用程序中。问题在于没有显示图像（只有浏览器的后备图像没有找到图像）。似乎数据URL是错误的，因为当我在base64解码器中复制数据URL时，图像已损坏。

我尝试了不同的Webpack加载器（URL加载器，文件加载器，svg加载器...）

webpack.config.json

module: {
  rules: [
    {
      test: /\.svg$/,
      loader: 'url-loader'
    }
  ]
}

tsd.d.ts

declare module "*.svg" {
  const content:string;
  export default content;
}

App.tsx

import content from './logo.svg';

class App extends React.Component {
  render() {
    <div>
      <img src={content} />
    </div>
  }
}

有什么想法要改变吗？

提前致谢！

Answer 1

我的问题是Webpack配置错误。

除其他外，我还有以下两种加载程序配置：

module: {
  rules: [
    {
      test: /\.svg$/,
      loader: 'url-loader'
    },
    {
      test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
      loader : 'file-loader'
    }
  ]
}

问题是我svg在两个规则中都有，因此webpack使用了错误的加载器。svg从第二条规则中删除零件可以解决此问题