Die Anzeige eines statischen Bildes über Reagieren, Typoskript und Webpack

Ich bin versucht, ein Bild anzuzeigen, das in einem React-Komponente als Teil von einem Projekt mit webpack und webpack-dev-server.

Bisher habe ich folgende Schritte abgeschlossen:

  • Verwendet npm zu installieren-Datei-loader
  • Aktualisiert webpack.config.js hinzufügen eines loader-für-Bild-Dateien
  • Importiert das Bild, ich möchte in meine Komponente
  • Verwendet der import in mein img-tag

Nachdem diese Schritte durchgeführt, webpack nicht kompiliert werden, mit einem "nicht finden kann Modul' Fehler:

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

Meine Ordner-Struktur ist wie folgt:

/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

Den neuen loader, die ich Hinzugefügt, um meine webpack.config.js ist:

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

Habe ich importiert die image-Datei in der App.tsx, wie diese:

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

...und verwendet den import in ein img-tag wie diesem:

<img src={ kittenHeader } />

Hinweis: Vollständiger text webpack.config.js und App.tsx bereitgestellt wurden, bis ich ein bisschen näher an die Antwort und erkannte Sie nicht relevant ist (siehe update 1).

Ich nehme an, ich mache einige sehr triviale Fehler mit Bezug auf den relativen Pfad im import. Wie Sie sich vorstellen können, habe ich versucht verschiedene alternativen.

Kann mir jemand einen Einblick?

Referenz, wie ich bin, kontinuierlich zu schlagen, Artikeln und Fragen im Zusammenhang mit der falschen version von webpack, hier sind meine Versionen:

  • Reagieren 15.5.4
  • Webpack 2.6.1
  • Webpack-dev-server 2.4.5
  • Typoskript 2.3.2

Update 1: 2017.06.05
So, Blick auf diese Frage ALSO und dieser Beitrag auf Medium, ich habe in der Lage zu erkennen, dass das problem nicht mit wie ich verwendet habe, webpack, aber die Tatsache, dass ich mit TypeScript. Der Fehler ist ein Typoskript Fehler verursacht durch die Tatsache, dass der typescript-compiler nicht weiß, was ein .jpg-Datei ist.

Offenbar bin ich gehen zu müssen, um eine d....ts-Datei oder verwenden Sie eine require-Anweisung.

Fast da...

Haben Sie zufällig einen Quell-repository, die wir verwenden könnten, um das problem zu reproduzieren? Das wäre sehr praktisch.
Wenn Sie mit webpack installieren möchten, können Sie @types/webpack-env statt und fallen zurück require statt import. Im Gegensatz zu importieren, der string, den Sie übergeben, um require nicht gelöst Typoskript. Natürlich, mit einem *.d.ts ist in Ordnung, zu
Danke @EvanSebastian, du bist der Kommentar kam gerade als ich dabei war zu schreiben meine Antwort. Wie Sie sehen können, meine Antwort ist unvollständig. Wissen Sie, wie Sie schreiben, ein d....ts für das jpg? Ist es möglich, ein Modul zu decken *.jpg oder würde ein d....ts erforderlich sein, für jede image-Datei?
Ich merke auch, Sie habe empfohlen @types/webpack-env , während ich verwendet habe @types/node. Die node-Typen funktionieren. Was ist der Unterschied zwischen diesen beiden, in Bezug auf die erste 'require' funktioniert? Ich nehme an, Sie sind einfach zwei d....ts Definitionen der gleichen zugrunde liegenden "erfordern" Umsetzung?
@types/webpack-env und @types/node unterschiedlich sind, verwenden Sie @types/node wenn Sie schreiben müssen, NodeJS-Module standard-Bibliothek-Testungen zur Verfügung. @types/webpack-env wird verwendet, wenn Sie in einem webpack Projekt gebündelt. Zum Beispiel require.ensure wird verfügbar, wenn Sie mit @types/webpack-env

InformationsquelleAutor Montgomery 'monty' Jones | 2017-06-01

  1. 3

    Mit regelmäßigen erfordern, dies ist, wie 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 funktionierte nicht für mich, entweder.

    InformationsquelleAutor mcku

  2. 1

    Dies ist, wie ich es funktioniert:

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

    Den Weg, Sie schlugen in Ihre Antwort schreiben Module Deklaration für jede image-Datei abgelegt wird in Komponenten.

    InformationsquelleAutor Hitendra

  3. 0

    Neben mcku Antwort können Sie auch die Einfuhren so:

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

    Obwohl Sie die Warnung ignorieren.

    InformationsquelleAutor JFord

  4. -1

    Den Fehler TS2307: Cannot find module '../images/kitten-header.jpg', ist die Hervorhebung, dass der TypeScript-compiler nicht verstehen, die Einfuhr einer .jpg-Datei.

    Den webpack-Konfiguration in Ordnung ist, wie gezeigt, indem Sie die image-Datei kopiert werden, um den dist Ordner erfolgreich trotz der compile-Fehler.

    Gibt es zwei Möglichkeiten, wir können dieses Problem lösen.

    Zuerst, könnten wir umgehen das Typoskript importieren, indem eine 'require' - Anweisung. Um dies zu tun, wird der import...

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

    ...kann ersetzt werden durch eine erfordern...

    const kittenHeader = require('../images/kitten-header.jpg');

    ...und das sollten alle sein, die benötigt werden.

    Hinweis, dass, in meinem Fall brauchte ich auch installieren, einige Testungen zu unterstützen, die 'require' - Anweisung. Ohne diese, ich war immer ein TS2304: Cannot find name 'require' Fehler.

    Ursprünglich verwendete ich @types/node, wie beschrieben in diese SO beantworten, aber @EvanSebastian wies darauf hin, dass Knoten vorgesehen ist, um Unterstützung schreiben NodeJS-Module, das ist nicht das, was ich Tue (siehe Kommentare auf die Frage).

    Versuchte ich @types/webpack-env, wie vorgeschlagen, aber dies führte zu einem TS2322: Type '{ src: {}; }' is not assignable to type 'HTMLProps<HTMLImageElement>'. Fehler gegen die src-Eigenschaft auf mein Bild-tag.

    Zuletzt habe ich eingeschaltet, um mit @types/requirejs, was ich hoffe, ist konzentriert genug, um zu vermeiden, einschließlich einer Belastung von unangemessenen zusätzlichen Arten. Es ist zurzeit arbeiten:

    npm install @types/requirejs --save-dev

    Alternativ, wir halten das importieren und bieten eine d.ts file mit Typ-information zu erklären, eine entsprechende Modul. Ich habe nicht in der Lage gewesen, genau zu entdecken, wie diese Datei Aussehen würde.

    InformationsquelleAutor Montgomery 'monty' Jones

Schreibe einen Kommentar