[vue3 配置] import 图片无法识别的问题

vue3引入图片,路径没错，但无法识别

import defaultImage from '@/assets/column.jpg'

Cannot find module '@/assets/column.jpg' or its corresponding type declarations.

为啥报这个错误？

typescript无法识别图片文件,需要在配置中增加声明。

 

1. 新建image.d.ts文件

/* eslint-disable */
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

或者

// src/image.d.ts
declare module '*.png' {
    const value: string;
    export default value;
  }
  
  declare module '*.jpg' {
    const value: string;
    export default value;
  }
  
  declare module '*.jpeg' {
    const value: string;
    export default value;
  }
  
  declare module '*.gif' {
    const value: string;
    export default value;
  }
  
// 这会告诉 TypeScript，.png、.jpg、.jpeg 和 .gif 文件是模块，并且它们导出一个字符串（通常是生成的图片 URL）。

 

2. 在tsconfig.json增加图片配置

"include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.jpg",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx",
        "./src/image.d.ts"   //图片配置
    ],

 

参考链接：

https://www.cnblogs.com/wangqiaomei/p/18075856