[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" //圖片配置 ],
參考鏈接:
http://www.rzrgm.cn/wangqiaomei/p/18075856
Code your future.

浙公網安備 33010602011771號