我想将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] 删除。
我来说两句