typescript图像导入

IT技术 reactjs typescript module tsconfig react-tsx
2021-03-29 02:49:46

我在这里找到了一个解决方案：Webpack & Typescript image import

但我收到错误：

[ts]
Types of property 'src' are incompatible.
  Type 'typeof import("*.png")' is not assignable to type 'string | undefined'.
    Type 'typeof import("*.png")' is not assignable to type 'string'.

我想我需要以某种方式导入导入，但无法弄清楚如何。我正在 React 中执行此操作。我看到该src属性被定义为string | undefined，这就是错误弹出的原因。

这是代码：

import * as Logo from 'assets/images/logo.png';

HTML：

<img src={Logo} alt="" />

以及基于上述解决方案的定义：

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

配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "lib": ["es5", "es6", "dom"],
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "./dist/",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "typeRoots": [
      "custom_typings"
    ]
  },
  "include": ["./src/**/*.tsx"],
  "exclude": ["dist", "build", "node_modules"]
}
2个回答

消除该错误的方法之一是修改 d.ts 文件，如下所示：

declare module "*.png"

消除

{
  const value: string;
  export default value;
}

或者你可以这样做：

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

更新

类型检查的最佳解决方案是：

declare module "*.png" {
   const value: any;
   export = value;
}
@danielrvt 你可能不是在d.ts/上做的custom.d.ts，而是在其他地方...
2021-06-03 02:49:46
我得到：TS1192：module '"*.png"' 没有默认导出。
2021-06-05 02:49:46
由于这个长期存在的问题，我很难让它发挥作用。一旦我将我的通配符declare module语句移到它们自己的类型文件中，而不是globals.d.ts我用于其他东西的现有文件（发生在import接口声明中......），我就能够import LOGO from "./logo.png".
2021-06-05 02:49:46
已经尝试从修改string到any，它不会帮助。在解析导入的类型时，似乎没有考虑 const 值。至于删除块，它也不起作用。
2021-06-15 02:49:46
该.d.ts文件需要放入src/文件夹才能工作，以防其他人遇到该问题，将其放入项目根目录。
2021-06-18 02:49:46

为了 react-native

global.d.ts在项目root文件夹上创建文件，然后在那里添加下一行

declare module '*.png' {
  const value: import('react-native').ImageSourcePropType;
  export default value;
}
其它你可能感兴趣的问题
上一篇如何从 reactjs 组件访问“key”属性 下一篇将 Angular 应用程序与 ReactJS 应用程序连接起来？