2017-06-23 1 views
7

In typescript(*.tsx) Dateien importieren ich nicht SVG-Datei mit dieser Aussage importieren:kann nicht SVG-Dateien in Typoskript

import logo from './logo.svg'; 

Transpiler sagt: [ts] cannot find module './logo.svg'. Meine svg-Datei ist nur <svg>...</svg>.

Aber in .js Datei kann ich es ohne Probleme mit genau die gleiche Import-Anweisung importieren. Ich nehme an, es hat etwas mit der Art der Svg-Datei zu tun, die irgendwie für ts transpiler gesetzt werden muss.

Könnten Sie bitte teilen, wie dies in ts-Dateien funktioniert?

+2

SVG-Dateien nicht Javascript sind und nicht verwendet werden können, als JavaScript-Module ist. Sie sollten diese Dateien stattdessen mit einer http-Anfrage laden. – toskv

+1

Verwenden Sie Webpack? Das ist das einzige, was ich gesehen habe, um eine solche "Import" -Anweisung zu verstehen. Vielleicht lässt Webpack dies in Ihrem JavaScript zu, aber es macht nicht die gleiche Magie in TypeScript-Dateien. (Ich glaube nicht, dass TypeScript selbst weiß, was hier zu tun ist.) – smarx

+1

Wenn Sie Webpack verwenden, müssen Sie wahrscheinlich Ihre Webpack-Konfiguration freigeben, um weitere Hilfe zu erhalten. – smarx

Antwort

7

Danke smarx für Hinweis auf Verwendung require(). Also in meinem Fall sollte es sein:

const logo = require("./logo.svg") as string; 

, die in * .tsx Dateien

9

funktioniert gut Wenn Sie webpack verwenden, können Sie dies tun, indem Sie eine benutzerdefinierte Typen-Datei erstellen.

eine Datei mit dem Namen erstellen custom.d.ts mit folgendem Inhalt:

declare module "*.svg" { 
    const content: any; 
    export default content; 
} 

Quelle: https://webpack.js.org/guides/typescript/#importing-other-assets

+1

Wahrscheinlich müssten Sie es zum Abschnitt 'include' in _tsconfig.json_ hinzufügen. –

Verwandte Themen