web-dev-qa-db-fra.com

Affichage d'une image statique à l'aide de React, TypeScript et Webpack

J'essaie d'afficher une image dans un composant React dans le cadre d'un projet utilisant webpack et webpack-dev-server.

Jusqu'ici j'ai complété les étapes suivantes:

  • Npm utilisé pour installer le chargeur de fichiers
  • Webpack.config.js mis à jour pour ajouter un chargeur pour les fichiers image
  • Importer l'image que je veux dans mon composant
  • Utilisé l'importation dans mon tag img

Ayant pris ces mesures, webpack ne parvient pas à compiler avec l'erreur «impossible de trouver le module»:

ERROR in [at-loader] ./src/components/App.tsx:4:26
    TS2307: Cannot find module '../images/kitten-header.jpg'.

Ma structure de dossier est la suivante:

/dist
   /images
      kitten-header.jpg
   bundle.js
   bundle.js.map
/node_modules
   (content ignored for brevity)
/src
   /components
      App.tsx
   /images
      kitten-header.jpg
   /styles
      App.less
   index.tsx
index.html
package.json
tsconfig.json
webpack.config.js

Le nouveau chargeur que j'ai ajouté à mon webpack.config.js est:

test: /\.(jpe?g|gif|png|svg)$/, loader: "file-loader?name=./images/[name].[ext]"

J'ai importé le fichier image, dans App.tsx, comme ceci:

import kittenHeader from '../images/kitten-header.jpg';

... et utilisé l'importation dans un tag img comme ceci:

<img src={ kittenHeader } />

Remarque: Les textes complets de webpack.config.js et App.tsx ont été fournis jusqu'à ce que je me rapproche un peu de la réponse et que je réalise qu'ils ne sont pas pertinents (voir la mise à jour 1).

Je suppose que je fais une erreur très triviale en ce qui concerne le chemin relatif dans l'importation. Comme vous pouvez l'imaginer, j'ai essayé diverses alternatives.

Quelqu'un peut-il donner un aperçu?

Pour référence, comme je frappe continuellement des articles et des questions relatives à la mauvaise version de webpack, voici mes versions:

  • Réagir 15.5.4
  • Webpack 2.6.1
  • Webpack-dev-server 2.4.5
  • TypeScript 2.3.2

Mise à jour 1: 2017.06.05
Donc, en regardant cette SO question et ce post sur Medium , j'ai pu identifier que le problème ne résidait pas dans la façon dont j'avais utilisé webpack, mais avec ce fait que j'utilise TypeScript. L'erreur est une erreur TypeScript due au fait que le compilateur TypeScript ne sait pas ce qu'est un fichier .jpg.

Apparemment, je vais devoir fournir un fichier d.ts ou utiliser une instruction require.

Presque là...

reactjswebpacktypescript-typingswebpack-file-loader
4
Montgomery 'monty' Jones

Avec regular require, voici comment je l’utilise dans un fichier tsx:

const logo = require('../assets/logo.png');

...

<img alt='logo' style={{ width: 100 }} src={String(logo)} />

J'espère que cela t'aides. importing n'a pas fonctionné pour moi non plus.

3
mcku

Voici comment je le fais fonctionner:

// This declaration can be move in some common .d.ts file, will prevent tslint from throwing error
declare function require(path: string);

const SampleComponent = () => (
  <div>
    <img src={require('./styles/images/deadline.png')} alt="Test" />
  </div>
);

La façon dont vous avez proposé votre réponse finira par écrire la déclaration de modules pour chaque fichier image inséré dans les composants.

1
Hitendra

En plus de la réponse de mcku, vous pouvez également utiliser les importations de cette façon:

// @ts-ignore
import * as kittenHeader from '../images/kitten-header.jpg';
...
<img alt='logo' style={{ width: 100 }} src={logo} />

Bien que vous deviez ignorer l'avertissement.

0
JFord