vue3+vite+ts使用图片

在 Vue 3、Vite 和 TypeScript 的项目中，使用图片通常涉及以下几个步骤：

1. **安装依赖**:
首先，你需要在项目中安装 `vue-loader` 和 `vite-plugin-vue3`，它们能很好地支持 Vue 的模板和类型检查。可以使用 npm 或 yarn 安装：

   npm install vue-loader vite-plugin-vue3 @types/vue

2. **配置 Vite**:
在 `vite.config.ts` 中添加对 Vue 3 的支持，并启用 TypeScript：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';

   export default defineConfig({
     plugins: [vue(), ...],
     build: {
       target: 'esnext', // 使用 ESNext 规范构建
       transpileDependencies: ['@vue/types'], // 转译需要的库
     },
   });

3. **引用图片**:
在 `.vue` 文件中，使用 `<img>` 标签引用图片资源，同时指定 `src` 属性，并且因为 TypeScript 支持静态类型，你可以给 `src` 字符串加上类型注解：

   <template>
     <img :src="require('./assets/myImage.png')" alt="My Image" :type="imageType" />
   </template>

   <script lang="ts">
   import { Component, Prop } from 'vue';
   
   interface ImageProps {
     imageType: string; // 图片类型，如 "image/jpeg"
   }

   export default class MyComponent extends Component<ImageProps> {
     //...
   }
   </script>

使用 `require` 函数是为了在运行时动态加载图片，避免打包所有图片到静态文件中。

4. **处理图片路径**:
如果图片位于静态资产目录（例如 `public/assets`），可以使用相对路径或者绝对 URL。如果你想让 Vite 自动处理，需要在 `vite.config.ts` 中设置 `alias` 或者使用 Vite 插件 `vite-plugin-vuetify` 或 `vite-plugin-eslint` 等。