在 gatsby 配置中导入图像失败

Question

我有一个带有 Gatbsy 的应用程序，我想在其中加载一系列图像以分配给 siteMetaData

我做了以下gatsby-config.ts

import projects from "./src/data/projects";

module.exports = {
  siteMetadata: {
    projects
  },
  plugins: [
    //...
  ]

我的project.ts基本上是

import * as Image from "./images";

export default [
    {
        title: Image.myImage
    }

而 images.ts 只是导出一系列图像：

import myImagefrom from "./src/images/projects/image.jpg";
export const myImage;

但我在编译时遇到错误

找不到模块“./src/images/projects/image.jpg”。

但如果我点击（点击链接），我确实会在可视代码中看到我的图像...

所以我不明白我做错了什么，我尝试了很多不同的路径，但无法成功。

Answer 1

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

    // fix: gatsby typescript error cannot find module img.jpg or its corresponding type declarations
    declare module "*.jpg" {
      export default "" as string;
    }
    declare module "*.png" {
      export default "" as string;
    }
    
  // fix typescript error of not being able to import svgs has react components
    declare module "*.svg" {
      import React = require('react');
      export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
      const src: string;
      export default src;
    }

来源： https://www.codegrepper.com/code-examples/javascript/gatsby+typescript+error+cannot+find+module+img.jpg+or+its+corresponding+type+declarations https://stackoverflow.com/a/54122106/3044126