Webpack cannot find image when imported - module not found

Question

I am using webpack dev server to serve up a simple Typescript app. In it, I am trying to load an image dynamically in the Typescript like so:

import img from "./image.png";

const myImg = new Image();
myImg.addEventListener("load", ...);
myImg.src = img;

The HTML, TS, and image files are all sitting right next to each other, so I use the relative path to grab the image. However, webpack complains saying "./image.png" is not a module. I am almost certain it must be a configuration issue. Here are the relevant files (with some values changed to generic values):

package.json

{
  "name": "my_project",
  "version": "0.1.0",
  "description": "My project",
  "main": "index.js",
  "scripts": {
    "build-prod": "webpack --config webpack.prod.js",
    "start-dev": "webpack-dev-server --config webpack.dev.js"
  },
  "author": "Cyle Ven Dawson",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "tslint": "^5.11.0",
    "typescript": "^3.0.3",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8",
    "webpack-merge": "^4.1.4"
  }
}

webpack.dev.js

const merge = require("webpack-merge");

const commonConfig = require("./webpack.common");

module.exports = merge(
  commonConfig,
  {
    "devServer" : {
      "allowedHosts": [
        "dev.example.com"
      ],
      "disableHostCheck": true,
      "host": "1.2.3.4",
      "port": 12345,
      "public": "dev.example.com:12345"
    },
    "mode": "development"
  }
);

webpack.common.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const TsConfigPathsPlugin = require("awesome-typescript-loader").TsConfigPathsPlugin;

module.exports = {
  "entry": "./src/index.ts",
  "module": {
    "rules": [
      {
        "include": /src/,
        "test": /\.ts$/,
        "use": {
          "loader": "awesome-typescript-loader"
        }
      },
      {
        "include": /src/,
        "test": /\.scss$/,
        "use": [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        "include": /src/,
        "test": /\.(png|svg|jpg|gif)$/,
        "use": [
          'file-loader'
        ]
      }
    ]
  },
  "output": {
    "publicPath": "/"
  },
  "plugins": [
    new HtmlWebPackPlugin({
      "filename": "./index.html",
      "template": "./src/index.html"
    })
  ],
  "resolve": {
    "extensions": [".ts", ".js"],
    "plugins": [
      new TsConfigPathsPlugin({
        tsconfig: __dirname + '/tsconfig.json',
        compiler: 'typescript'
      })
    ]
  },
};

Have you solved this? I have the same issue. Webpack can't find images even if the path is correct. — Kokodoko, Apr 18 '19 at 13:24

score 1 · Accepted Answer · answered Feb 05 '20 at 10:28

I leave this here in case anyone comes here from google. You must tell typescript that the png image is a module. The way you do this is inside of the assets folder or where ever you are storing you images make a file called index.d.ts

Inside this file put the following:

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

This will give you the ability to import a png image as a module and make Typescript happy. I believe this will work for .wav, .gif, .jpg ect. You would just need to declare each one in the index.d.ts file. I hope this helps some one.

You can also put the `index.d.ts` file in a different directory and reference it in your `tsconfig.json` under `typeRoots`. I add all my types to a `types` directory at the root of my project, so for static file types I have `types/statics/index.d.ts`. — dawsonc623, Feb 05 '20 at 13:08

Webpack cannot find image when imported - module not found

1 Answers1