TypeScriptでSVGをインポートWebpackでReact app

Question

TypeScriptで書かれ、Webpackにバンドルされた小さなReactアプリにSVGイメージをインポートしたいと思います。問題は、画像が表示されないことです（画像が見つからなかったブラウザの代替画像のみ）。 Base64デコーダでデータURLをコピーすると画像が壊れるため、データ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> 
    } 
} 

アイデアを変更するには？

ありがとうございます！

Answer 1

私の問題は、Webpackの設定が間違っていたことです。私が持っていた

は、他の人の横には、次の2つのローダ構成：

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

は、問題はそのためのWebPACKが間違ったローダーを使用し、私は両方のルールでsvgを持っていたことでした。 2番目のルールからsvgの部分を削除すると、問題が解決しました