Webpack和Typescript图像导入

Cosmin SD:

我正在开发一个React应用程序并使用WebpackTypescript我想在<img/>标签之一中使用图片但是,我没有找到访问图像文件的正确方法。

webpack.config.js

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

app.tsx

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

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

Erik Vullings:

或者,在您的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';

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章