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

Question

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

我尝试了不同的 Webpack 加载器(url-loader、file-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 部分解决了问题