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:

Console error

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

enter image description here

And my bundled folder structure is like this:

Folder structure

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?

Matt McCutchen · Accepted Answer · 2018-10-03 03:24:36Z

3

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).

answered Oct 3, 2018 at 3:24

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cássio Moraes Over a year ago

That worked for the file reference, on top of that I also had a problem coping the file to the "build" folder. Also solved that and everything started to work.

Collectives™ on Stack Overflow

Using image imported in Typescript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related