webpack not able to import images( using express and angular2 in typescript)

Question

I am not able to import images in my headercomponent.ts. I suspect it is because of something i am doing wrong while compiling ts(using webpack ts loader) because same thin

Answer 1

To be able to use default import like this:

import grumpyCat from '../assets/grumpy_cat.jpg';

Define jpg module declaration:

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

and in your tsconfig use "module": "es6" (see @vedran comment above) or when you use "module": "commonjs" add "esModuleInterop": true,

  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true,
...

Source: https://github.com/TypeStrong/ts-loader/issues/344#issuecomment-381398818