I made the simplest project using

我做了一个最简单的项目

vue create testtype3

command:

命令：

App.vue:

附录：

<template>
  <img alt="Vue logo" src="./assets/logo.png">

  <img :src="MyIcon" />

</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MyIcon from './assets/logo.png';


export default defineComponent({
  name: 'App',
  components: {


  },

  setup(props, { emit }) {
    return  {
      MyIcon
    }
  }
});
</script>

main.ts:

main.ts:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

index.d.ts:

index.d.ts:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

babel.config.js:

Babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json:

Package.json：

{
  "name": "testtype3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "file-loader": "^6.2.0",
    "typescript": "~4.5.5"
  }
}

tsconfig.json:

Tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

vue.config.js:

Vue.config.js：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

The App displays a logo in two ways: passing a path String to an img and by passing an imported MyLogo to an img. However, I get an error for the second approach:

该应用程序以两种方式显示徽标：将路径字符串传递给IMG和将导入的MyLogo传递给IMG。但是，对于第二种方法，我得到了一个错误：

TS2307: Cannot find module './assets/logo.png' or its corresponding type declarations.
<script lang="ts">
import { defineComponent } from 'vue';
import MyIcon from './assets/logo.png';
                            ^^^^^^^^^^^^^^^^^^^

Removing the MyIcon import and the img element that uses MyIcon results in npm run serve running without problems.

删除MyIcon导入和使用MyIcon的img元素会导致NPM Run Serve正常运行。

I made a types folder in the root directory and created a index.d.ts there, however the error still persists.

我在根目录中创建了一个Types文件夹，并在那里创建了一个index.d.ts，但是错误仍然存在。

you should edit index.d.ts to this:

您应该将index.d.ts编辑为：

declare module '*.png' {
  const value: string;
  export = value;
}

also you should add a line to tsconfig.json so it should look like this:

另外，你应该在tslog.json中添加一行，这样它应该看起来像这样：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    // add this line
    "types/index.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}