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

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

1 个答案: