Using image imported in Typescript

Question

I'm creating a project with Typescrip, Three.js and Webpack.

For this project I need to put an icon inside the view to show it in fullscreen.

To achieve this I followed the above thread: Typescript image import

My import-png.d.ts

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

My image import:

import * as fullscreenIcon from "./resources/fullscreenIcon.png";

My function to add the icon:

private addFullscreenIcon(): void {
   const fullscreen = document.createElement("div");
   const icon = document.createElement("img") as HTMLImageElement;

   console.log("fullscreen", fullscreenIcon);

   icon.src = fullscreenIcon.default;
   fullscreen.appendChild(icon);

   this.canvas.append(fullscreen);
}

On the page console I got this:

My html structure, with the div generate by the const fullscreen = document.createElement("div"); command, is:

And my bundled folder structure is like this:

In the console the image name is 627aac9ac2a7a147efb902c908a25b2c.png but in the folder structure is fullscreenIcon.png

So if icon.src = fullscreenIcon.default; is not working, how should I proceed?

Answer 1

The file-loader produces a module with a CommonJS export assignment, not a default export. Either enable the esModuleInterop TypeScript compiler option to make export assignments interoperable with default exports, or change your declaration to:

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

and remove the .default from your code. See this answer for a little background on the different kinds of imports and exports (it doesn't cover TypeScript though).