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

莱纳基督教

我想将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>
  }
}

有什么想法要改变吗?

提前致谢!

莱纳基督教

我的问题是Webpack配置错误。

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用react.js在单页面应用程序中导航

如何在Webpack构建的应用程序中导入不在npm注册表上的库?

如何在Angular 2 Webpack应用程序中导入jQuery ui touch Punch?

如何在webpack中使用angular-cli在angular2应用程序中导入xml2js

如何在Angular / Angular2 / Angular4应用程序中导入和使用particles.js

使用TypeScript在节点应用程序中导入JSON文件

使用Webpack从Typescript导入HTML

无法在Node.js Typescript应用程序中导入URL类

在React应用程序中使用Jest模拟导入/模块

在Xcode中导入框架的应用程序不会使用框架中翻译后的字符串资源

如何使用Typescript和Webpack创建单页Web应用程序?

在React / Webpack应用程序中将节点模块导入到Web Worker

如何使用Typescript,React和Webpack导入SCSS或CSS模块

如何正确地在运行Webpack的jhipster应用程序中导入传单?-标记图标丢失

在React应用程序中导入单个组件

使用使用JavaScript互操作导入的JavaScript库将React应用程序移植到Blazor应用程序

如何在React Typescript应用程序中导入react-admin?

Webpack 2未加载Angular2 Typescript应用程序的导入

使用Webpack加载在TypeScript中导入angular

如何在带有 Webpack 的 AngularJS 应用程序 (1.x) 上使用 TypeScript

在 React 应用程序中导入 scss 时出错

在 typescript/jquery/webpack 应用程序中使用 aws-sdk

如何在 Choregraphe 的应用程序中导入模块(在其中使用相对较大的包)?

如何使用 Google 应用程序脚本在 Google 表格中导入带有 xml 响应的 txt 文件?

无法在 TypeScript 应用程序中导入量角器

在反应应用程序中导入和使用 nano-memoize?

将 typescript 模块导入 React 应用程序中的 JS 模块

如何将文件导入使用 create react app 作为原始文本的 react 应用程序?

将 TypeScript 模块从本地模块导入 React 应用程序