web-dev-qa-db-fra.com

Importation d'images Webpack et TypeScript

Je travaille sur une application React et j'utilise Webpack & TypeScript. Je souhaite utiliser une image dans l'un des <img/> Mots clés. Cependant, je n'ai pas trouvé le bon moyen d'accéder aux fichiers image.

webpack.config.js:

 ...
 module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]',
                }
            }
        ]

app.tsx:

...
render() {
    return <img src='/assets/logo-large.png' alt="logo"/>
}

Lors de l'exécution de l'application, le assets/logo-large.png la ressource est introuvable.

reactjstypescriptwebpack
21
Cosmin SD

Alternativement, dans votre dossier custom_typings (si vous en disposez), vous pouvez ajouter un nouveau import-png.d.ts fichier:

declare module "*.png" {
  const value: any;
  export default value;
}

Vous pouvez donc importer une image en utilisant:

import myImg from 'img/myImg.png';

Alternativement, comme indiqué par @ mario-petrovic, vous devez parfois utiliser une option d'exportation différente comme ci-dessous (export = syntaxe). Voir ici pour les différences entre les deux approches:

declare module "*.png" {
  const value: any;
  export = value;
}

Dans ce cas, vous devrez probablement importer l'image en tant que:

import * as myImg from 'img/myImg.png';
18
Erik Vullings

Vous devez require l'image, puis utiliser cette variable comme source, comme ceci:

// At the top of the file, with all other imports/requires
const imageSrc = require('/assets/logo-large.png')

...

render() {
    return <img src={String(imageSrc)} alt="logo"/>
}
14
ahstro