texto - El paquete web no puede importar imágenes(usando express y angular2 en mecanografía)

mecanografia online gratis ejercicios

Question

No puedo importar imágenes en mi headercomponent.ts. Sospecho que se debe a algo que estoy haciendo mal al compilar ts (usando webpack ts loader) porque lo mismo funciona con reaccionar (donde los componentes están escritos en es6)

La ubicación del error es

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

mi configuración de webpack es

// 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''
};

y mi estructura de directorios se ve así

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

Mi archivo tsconfig es el siguiente:

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

Sospecho que estoy desordenando algo en la compilación mecanografiada, no estoy seguro de qué

Answer 1

El problema es que se confunden los módulos de nivel de TypeScript y los módulos de nivel de paquete web.

En Webpack, cualquier archivo que importe pasa por algún canal de compilación.

En .ts solo los archivos .ts y .js son relevantes y si intenta import x from file.png TypeScript simplemente no sabe qué hacer con él, TypeScript no usa la configuración de Webpack.

En su caso, necesita separar las inquietudes, usar la import from para el código TypeScript / EcmaScript y el uso require para los aspectos específicos del paquete web.

Necesitaría hacer que TypeScript ignore este paquete web especial que require sintaxis con una definición como esta en un archivo .d.ts :

declare function require(string): string;

Esto hará que TypeScript ignore las declaraciones requeridas y Webpack podrá procesarlo en el canal de compilación.

Answer 2

En lugar de:

import image from ''pathToImage/image.extension'';

Utilizar:

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

Answer 3

Estoy usando

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

y creó una definición mecanografiada con

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

Esto solo funciona cuando tienes un controlador correcto como el cargador de archivos en el paquete web. Debido a que este controlador le dará una ruta a su archivo.

Answer 4

Si desea utilizar la sintaxis de ES6 para la importación.

Primero asegúrese de que en su tsconfig.json tenga:

target: ''es5'',
module: ''es6''

Lo siguiente debería funcionar ahora:

import MyImage from ''./images/my-image.png'';

Answer 5

También tuve el mismo problema, así que utilicé el siguiente enfoque:

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

En mi componente simplemente asigné la imagen importada a un miembro de datos;

export class TempComponent{
    public tempImage = myImage;
}

y lo usé en plantilla como:

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

Answer 6

Una pequeña mejora en la respuesta de Christian Stornowski sería hacer que la exportación sea predeterminada, es decir

declare module "*.png" {
  const value: string;
  export default value;
}

Para que puedas importar una imagen usando:

import myImg from ''img/myImg.png'';