Gatsby 与 Typescript 导入资产错误 (ts2307)

Question

我正在尝试使用 import

添加图片

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

我在 gatsby 中使用 Typescript ... 奇怪的是 它在普通 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
      },
      
    },
  ],
}

文件夹结构

• 源
  • 组件
    • MainComponent.tsx
    • Header.tsx
  • 资产
    • 图片
      • 图片.jpg

Answer 1

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

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

参考：Importing images in TypeScript React - "Cannot find module"

感谢 ferran-buireu 清除所有查询。

Answer 2

这是多余的：

import Header from '../components/Header'

因为它们在同一个文件夹中，所以您可以：

import Header from './Header'

关于资产，您可以关注这个类似的问题Importing images in TypeScript React - "Cannot find module" 以获得一些想法，但您可以通过以下方式轻松修复它：

const image = require('../assets/images/picture.jpg')

注意：我猜这是答案中的错字，但您在 import image from '../assets/images/picture.jpg 的输入中缺少尾随引号

另外，尝试将allExtensions布尔值改回false：

    allExtensions: false,

感谢Kyle Mathews