webpack non in grado di importare immagini (utilizzando express e angular2 in dattiloscritto)

Question

Non riesco ad importare immagini nel mio headercomponent.ts. Ho il sospetto che è a causa di qualcosa che sto facendo male durante la compilazione ts (usando webpack ts loader) a causa stessa cosa funziona con reagire (in cui i componenti sono scritti in ES6)

La posizione di errore è

//headercomponent.ts 
import {Component, View} from "angular2/core"; 
import {ROUTER_DIRECTIVES, Router} from "angular2/router"; 
import {AuthService} from "../../services/auth/auth.service"; 
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR** Cannot find module '../../images/logo.png' 

@Component({ 
    selector: 'my-header', 
    //templateUrl:'components/header/header.tmpl.html' , 
    template: `<header class="main-header"> 
    <div class="top-bar"> 
    <div class="top-bar-title"> 
     <a href="/"><img src="{{logoSource}}"></a> 
    </div> 

mia webpack config è

// webpack.config.js 
'use strict'; 

var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var basePath = path.join(__dirname,'public'); 
//const TARGET = process.env.npm_lifecycle_event; 
console.log("bp " + basePath) 
module.exports = { 
    entry: path.join(basePath,'/components/boot/boot.ts'), 
    output: { 
    path: path.join(basePath,"..","/build"), // This is where images AND js will go 
    publicPath: path.join(basePath,"..","/build/assets"), 
    // publicPath: path.join(basePath ,'/images'), // This is used to generate URLs to e.g. images 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new ExtractTextPlugin("bundle.css") 
    ], 
    module: { 
    preLoaders: [ { test: /\.tsx$/, loader: "tslint" } ], 
    // 
    loaders: [ 
     { test: /\.(png!jpg)$/, loader: 'file-loader?name=/img/[name].[ext]' }, // inline base64 for <=8k images, direct URLs for the rest 
     { 
     test: /\.json/, 
     loader: 'json-loader', 
     }, 
     { 
     test: /\.ts$/, 
     loader: 'ts-loader', 
     exclude: [/node_modules/] 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     exclude: [/node_modules/], 
     loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded") 
     }, 
     // fonts and svg 
     { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" } 
    ] 
    }, 
    resolve: { 
    // now require('file') instead of require('file.coffee') 
    extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6', 'png'] 
    }, 
    devtool: 'source-map' 
}; 

e la mia struttura di directory simile a questo

-/ 
-server/ 
-build/ 
-node-modules/ 
-public/ 
    -components/ 
    -boot/ 
    -boot.component.ts 
    -header/ 
    -header.component.ts 
    -images/ 
    -logo.png 
    -services/ 
-typings/ 
-browser/ 
-main/ 
-browser.d.ts 
-main.d.ts 
-tsconfig.json 
-typings.json 

mio file TSconfig è la seguente:

//tsconfig.json 
    { 
     "compilerOptions": { 
     "target": "es5", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": false, 
     "noImplicitAny": false 
     }, 
     "exclude": [ 
     "node_modules" 
     ] 
    } 

Ho il sospetto che sto scompigliando qualche cosa nella compilation dattiloscritto, non so cosa

Answer 1

Il problema è che si confondono moduli di livello tipografico e moduli di livello webpack.

In Webpack qualsiasi file importato passa attraverso alcune pipeline di build.

a macchina solo .ts e .js file sono pertinenti e se si tenta di import x from file.png dattiloscritto non sa cosa fare con esso, Webpack config non viene utilizzato da dattiloscritto.

Nel tuo caso è necessario separare i dubbi, utilizzare import from per il codice TypeScript/EcmaScript e utilizzare require per specifiche di Webpack.

Si avrebbe bisogno di fare dattiloscritto ignorare questo speciale sintassi Webpack require con una definizione come questa in un file .d.ts:

declare function require(string): string; 

Questo renderà dattiloscritto ignorare la richiedono dichiarazioni e Webpack sarà in grado di elaborare in la pipeline di costruzione.

Answer 2

Invece di:

import image from 'pathToImage/image.extension'; 

Usa:

const image = require('pathToImage/image.extension'); 

Answer 3

Ho anche avuto lo stesso problema in modo seguente approccio che ho usato:

import * as myImage from 'path/of/my/image'; 

Nel mio componente ho semplicemente assegnato l'immagine importata a un membro di dati;

export class TempComponent{ 
    public tempImage = myImage; 
} 

e utilizzati nel modello come:

<img [src]="tempImage" alt="blah blah blah"> 

Answer 4

sto usando

import * as myImage from 'path/of/my/image.png'; 

e ha creato una definizione dattiloscritto con

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

Questo funziona solo quando avere un gestore corretto come il file -loader in webpack. Perché questo gestore ti darà un percorso per il tuo file.

Answer 5

Un piccolo miglioramento alla risposta di Christian Stornowski sarebbe quello di rendere il default di esportazione, vale a dire declare module "*.png" { const value: string; export default value; }

modo da poter importare un'immagine mediante:

import myImg from 'img/myImg.png';