Gatsby 使用 Typescript 导入资产错误 (ts2307)

Question

我正在尝试使用导入添加图像

import image from '../assets/images/picture.jpg 

我正在将 Typescript 与 gatsby 一起使用...奇怪的是它可以与普通的 javascript （.js ~ .jsx 文件）一起使用，但是当我使用（.ts ~ .tsx 文件）时它会抛出此错误

找不到模块“../assets/images/picture.jpg”或其相应的类型声明。TS(2307)

奇怪的是它与普通组件一起工作得很好，比如

import Header from '../components/Header'

这是我的tsconfig.json文件

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2015",
      "es2017"
    ],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true
  },
  "include": [
    "./src/**/*"
  ]
}

这是gatsby-config.json 文件

module.exports = {
  /* Your site config here */
  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        jsxPragma: `jsx`, // defaults to "React"
        allExtensions: true, // defaults to false
      },
      
    },
  ],
}

文件夹结构

• 源代码
  • 成分
    • 主要组件.tsx
    • 标头.tsx
  • 资产
    • 图片
      • 图片.jpg

Answer 1

在文件夹src中创建index.d.ts文件，并添加这一行

declare module "*.jpg"
declare module "*.png"
declare module "*.svg"

参考：在 TypeScript React 中导入图像 - “找不到模块”

感谢ferran-buireu清除了所有疑问。