Webpack和Typescript图像导入

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在开发一个 应用程序并使用 和

。我想在<img/>标签之一中使用图片。但是，我没有找到访问图像文件的正确方法。

：

 ...
 module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]',
                }
            }
        ]

：

...
render() {
    return <img src='/assets/logo-large.png' alt="logo"/>
}

运行应用程序时，assets/logo-large.png找不到资源。

回答：

或者，在您的custom_typings文件夹中（如果有的话），可以添加一个新import-png.d.ts文件：

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

因此，您可以使用以下命令导入图像：

import myImg from 'img/myImg.png';

另外，正如@ mario-petrovic所报告的那样，有时您需要使用以下不同的导出选项（export

=语法）。请参阅此处了解两种方法之间的区别：

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

在这种情况下，您可能需要将图像导入为：

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

以上是 Webpack和Typescript图像导入 的全部内容， 来源链接： utcz.com/qa/406455.html

回到顶部