Importer SVG dans TypeScript Réagir avec Webpack

Question

Je voudrais importer une image SVG dans une petite application React écrite avec TypeScript et fournie avec Webpack. Le problème est qu'aucune image n'est affichée (seule l'image de repli du navigateur indiquant qu'aucune image n'a été trouvée). Il semble que l'URL des données est incorrecte, car lorsque je copie l'URL des données dans un décodeur base64, l'image est brisée.

Je suis essayé différents chargeurs webpack (url-chargeur, chargeur de fichiers, svg-chargeur, ...)

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> 
    } 
} 

Des idées de quoi changer?

Merci d'avance!

Answer 1

Mon problème était que Webpack était mal configuré.

j'avais, à côté d'autres, les deux configurations de chargeur suivantes:

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

Le problème était que je devais svg dans les deux règles, donc webpack a utilisé le mauvais chargeur. Suppression de la partie svg de la deuxième règle résolu le problème