web-dev-qa-db-de.com

Anzeigen eines statischen Bildes mit React, TypeScript und Webpack

Ich versuche, ein Bild in einer React-Komponente als Teil eines Projekts mithilfe von Webpack und Webpack-Dev-Server anzuzeigen.

Bisher habe ich folgende Schritte durchgeführt:

  • Verwendet npm zur Installation des File-Loader
  • Webpack.config.js wurde aktualisiert, um einen Loader für Image-Dateien hinzuzufügen
  • Das gewünschte Bild in meine Komponente importiert
  • Verwendet den Import in meinem Img-Tag

Nachdem diese Schritte ausgeführt wurden, kann webpack nicht mit dem Fehler "Modul nicht gefunden" kompiliert werden:

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

Meine Ordnerstruktur sieht wie folgt aus:

/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

Der neue Loader, den ich zu meiner webpack.config.js hinzugefügt habe, ist:

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

Ich habe die Bilddatei in App.tsx folgendermaßen importiert:

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

... und den Import in einem img-Tag wie folgt verwendet:

<img src={ kittenHeader } />

Hinweis: Der vollständige Text von webpack.config.js und App.tsx wurde bereitgestellt, bis ich der Antwort etwas näher kam und merkte, dass sie nicht relevant waren (siehe Update 1).

Ich gehe davon aus, dass ich einen sehr trivialen Fehler bezüglich des relativen Pfads beim Importiere. Wie Sie sich vorstellen können, habe ich verschiedene Alternativen ausprobiert.

Kann jemand einen Einblick geben?

Als Referenz, da ich ständig Artikel und Fragen zur falschen Version des Webpacks finde, sind hier meine Versionen:

  • Reagieren Sie 15.5.4
  • Webpack 2.6.1
  • Webpack-dev-Server 2.4.5
  • TypeScript 2.3.2

Update 1: 2017.06.05
Wenn ich also diese SO -Frage und diesen Beitrag auf Medium betrachte, konnte ich feststellen, dass das Problem nicht in der Art und Weise liegt, wie ich es verwendet habe Webpack, aber mit der Tatsache, dass ich TypeScript verwende. Der Fehler ist ein TypeScript-Fehler, der dadurch verursacht wird, dass der TypeScript-Compiler nicht weiß, was eine JPG-Datei ist.

Anscheinend muss ich eine d.ts-Datei bereitstellen oder eine Require-Anweisung verwenden.

Fast dort...

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

Bei normaler Anforderung verwende ich es in einer TSX-Datei:

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

...

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

Hoffe das hilft. importing hat bei mir auch nicht funktioniert.

3
mcku

So bekomme ich es zum Laufen:

// 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>
);

Die Art und Weise, die Sie in Ihrer Antwort vorgeschlagen haben, schreibt die Moduldeklaration für jede in Komponenten platzierte Bilddatei.

1
Hitendra

Neben der Antwort von mcku können Sie auch Importe folgendermaßen verwenden:

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

Obwohl Sie die Warnung ignorieren müssen.

0
JFord