diff --git a/apps/vite-vue3-project/package.json b/apps/vite-vue3-project/package.json index 149a7a4..7e664ac 100644 --- a/apps/vite-vue3-project/package.json +++ b/apps/vite-vue3-project/package.json @@ -17,6 +17,7 @@ "@vitejs/plugin-vue": "^3.1.2", "typescript": "^4.8.4", "vite": "^3.1.8", + "vite-imagetools": "^6.2.4", "vite-plugin-image-presets": "^0.3.2", "vue-tsc": "^1.0.8" } diff --git a/apps/vite-vue3-project/vite.config.ts b/apps/vite-vue3-project/vite.config.ts index d9a4efd..fbc6f7a 100644 --- a/apps/vite-vue3-project/vite.config.ts +++ b/apps/vite-vue3-project/vite.config.ts @@ -1,20 +1,31 @@ +import { extname } from 'node:path'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; +import { imagetools } from 'vite-imagetools'; import imagePresets, { formatPreset } from 'vite-plugin-image-presets'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), - imagePresets({ - modern: formatPreset({ - formats: { - avif: {}, - webp: {}, - original: {}, + // imagePresets({ + // modern: formatPreset({ + // formats: { + // avif: {}, + // webp: {}, + // original: {}, + // }, + // loading: 'lazy', + // }), + // }), + // 验证否兼容vite-imagetools + imagetools({ + defaultDirectives: (url) => { + return new URLSearchParams({ + format: 'avif;webp;' + extname(url.pathname).slice(1), + as: 'picture', + }); }, - loading: 'lazy', - }), }), ], }); diff --git a/packages/picture/README.md b/packages/picture/README.md index 8fee395..1219537 100644 --- a/packages/picture/README.md +++ b/packages/picture/README.md @@ -4,82 +4,60 @@ ## 安装 -`pnpm install @kwai-explore/picture.vue` +```shell +pnpm install @kwai-explore/picture.vue +``` ## 使用 -> 建议配合 (vite-plugin-image-presets) 使用 +> 建议配合 [vite-imagetools](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite) 使用 -### 安装 [vite-plugin-image-presets](github.com/ElMassimo/vite-plugin-image-presets) +### 安装 -`pnpm add -D vite-plugin-image-presets` +```shell +pnpm add -D vite-imagetools +``` ### 建议配置 -`vite.config.ts` +需要修改图片资源导出的数据结构。 ```ts +// vite.config.ts + +import { extname } from 'node:path'; import imagePresets, { formatPreset } from 'vite-plugin-image-presets'; -// ... - plugins: [ - vue(), - imagePresets({ - modern: formatPreset({ - formats: { - avif: {}, - webp: {}, - original: {}, - }, - loading: 'lazy', - }), - }), - ], +export default { + // ... + plugins: [ + vue(), + imagePresets({ + defaultDirectives: (url) => { + if (url.searchParams.get('preset') === 'modern') { + return new URLSearchParams({ + format: 'avif;webp;' + extname(url.pathname).slice(1), + as: 'picture', + }); + } + return new URLSearchParams(); + }, + }), + ], +} ``` -根据上面的配置添加类型: - -`vite-env.d.ts` - -这里的文档需要换一下:理论上应该标记的是自己生成的类型 - ```ts +// xxx.d.ts + declare module '*?preset=modern' { - type SourceOption = { - type: string; - srcset: string; - }; - type ImgOption = { - src: string; - // 这下面的属性需要与 vite config 里的 formatPreset 配置同步修改 - loading: 'lazy'; - }; - type PictureOption = [...SourceOption[], ImgOption]; - - const src: PictureOption; - export default src; + import type { ImageToolsPictureOption } from '@kwai-explore/picture.vue'; + const src: ImageToolsPictureOption; + export default src; } ``` -### 在代码中使用 - -> Picture 组件接受的属性跟 `img` 相同,唯一的例外是 `src` 接收一个数组,一个例子是 - -```json - [{ - type: 'image/webp', - srcset: '/assets/logo.ffc730c4.webp 48w, /assets/logo.1f874174.webp 96w', - }, - { - type: 'image/jpeg', - srcset: '/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w', - src: '/assets/logo.81d93491.jpeg', - class: 'img thumb', - loading: 'lazy', - ] -``` - -在我们配置好 `vite-plugin-image-presets` 之后,可以直接在 import 图片的语句后面加一个 query,产出的数据就是上面需要的格式。 +在我们配置好 `vite-imagetools` 之后,可以直接在 import 图片的语句后面加一个 query ,产出的数据就是组件需要的格式。 ```vue