Использование изображения, импортированного в Typescript

Question

Я создаю проект с Typescrip, Three.js и Webpack.

Для этого проекта мне нужно поместить значок внутри представления, чтобы показать его в полноэкранном режиме.

Для достижения этой цели я следовал вышеупомянутой теме: Импорт изображений машинописного текста

Мой import-png.d.ts

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

Импорт моего изображения:

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

Моя функция добавления значка:

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);
}

На странице консоли я получил это:

Моя html-структура с div, генерируемым командой const fullscreen = document.createElement("div");, выглядит следующим образом:

А моя структура папок выглядит следующим образом:

В консоли имя изображения - 627aac9ac2a7a147efb902c908a25b2c.png, но в структуре папок - fullscreenIcon.png

Итак, если icon.src = fullscreenIcon.default; не работает, как мне поступить?

Answer 1

file-loader создает модуль с назначением экспорта CommonJS, а не экспорт по умолчанию.Либо включите параметр компилятора esModuleInterop TypeScript, чтобы сделать назначения экспорта совместимыми с экспортом по умолчанию, либо измените свое объявление на:

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

и удалите .default из своего кода.См. этот ответ , чтобы немного узнать о различных видах импорта и экспорта (хотя он не охватывает TypeScript).