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

Question

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

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

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部分解决了这个问题