Почему я должен требовать изображения вместо импорта с помощью веб-пакета / реагировать / набирать текст

Question

Я пытаюсь импортировать .png с помощью url-загрузчика, см. Ниже:

import img from './img.png';
...
return <div>
  <img src={img} />
</div>;

После загрузки страницы это отображается в DOM как <img>.

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

{
    test: /\.png$/,
    use: {
      loader: 'url-loader?mimetype=image/png',
      options: {
        name: './[name].[ext]'
      }
    }
  },

Если мне требуется изображение, оно работает просто отлично.Я где-то читал о том, что это проблема с TypeScript, поэтому я настроил свои пользовательские объявления, которые прекрасно работают для .scss и .svg:

declare module "*.svg" {
const content: any;
export default content;
}

declare module "*.scss" {
const content: any;
export default content; 
}

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

Стоит отметить, что этот проект отображается на стороне сервера, однакодо сих пор все было относительно просто.Что мне не хватает?Кто-нибудь делал это раньше в похожем env (реагировать, ssr, машинопись, веб-пакет)?

Приветствия!

РЕДАКТИРОВАТЬ:

Интересно, я могу импортировать с помощью следующего:

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

import * as img from './klarna.png';

И это работает ...

Так почему же, когда я изменяю его на export default content, как у меня с моими .scss и .svg, то import img from './klarna.png'; этоне работает?!