Question

我正在尝试使用url-loader导入.png，请参见以下内容：

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

页面加载完成后，在DOM中显示为<img>。

在webpack中，我将其设置如下：

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

值得注意的是，该项目是服务器端渲染的，但是到目前为止，所有事情都相对简单。我想念什么？以前有人在类似的环境（react，ssr，打字稿，webpack）中完成此操作吗？

干杯！

编辑：

有趣的是，我可以输入以下内容：

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

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

这可行...

那为什么当我将其更改为export default content时，就像我使用.scss和.svg的import img from './klarna.png';一样，它为什么不起作用？！

为什么我必须要求图像而不是使用webpack / react / typescript

0 个答案: