From 49b37962e58622750af84d69192a4e3125a47139 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 23 Feb 2025 01:48:54 +0800
Subject: [PATCH] feat(theme): add `width/height` props to `<VPImage>` (#475)

* feat(theme): add `width/height` props to `<VPImage>`

* chore: tweak
---
 theme/src/client/components/VPImage.vue | 17 ++++++++++++++++-
 theme/src/client/utils/shared.ts        |  9 +++++++++
 theme/src/shared/base.ts                |  4 ++--
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/theme/src/client/components/VPImage.vue b/theme/src/client/components/VPImage.vue
index bbd8e5fd..9c396a6e 100644
--- a/theme/src/client/components/VPImage.vue
+++ b/theme/src/client/components/VPImage.vue
@@ -1,11 +1,25 @@
 <script lang="ts" setup>
 import type { ThemeImage } from '../../shared/index.js'
+import { computed } from 'vue'
 import { withBase } from 'vuepress/client'
+import { numToUnit } from '../utils/index.js'
 
-defineProps<{
+const props = defineProps<{
   image: ThemeImage
   alt?: string
 }>()
+
+const styles = computed(() => {
+  const image = props.image
+  if (!image || typeof image === 'string')
+    return ''
+  if (!image.width || !image.height)
+    return ''
+  return {
+    width: numToUnit(image.width),
+    height: numToUnit(image.height),
+  }
+})
 </script>
 
 <script lang="ts">
@@ -19,6 +33,7 @@ export default {
     <img
       v-if="typeof image === 'string' || 'src' in image"
       class="vp-image"
+      :style="styles"
       v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
       :src="withBase(typeof image === 'string' ? image : image.src)"
       :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
diff --git a/theme/src/client/utils/shared.ts b/theme/src/client/utils/shared.ts
index 60f43a9e..0dfa5d96 100644
--- a/theme/src/client/utils/shared.ts
+++ b/theme/src/client/utils/shared.ts
@@ -36,3 +36,12 @@ export function isActive(
 export function normalize(path: string): string {
   return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
 }
+
+export function numToUnit(value?: string | number): string {
+  if (typeof value === 'undefined')
+    return ''
+  if (String(Number(value)) === String(value)) {
+    return `${value}px`
+  }
+  return value as string
+}
diff --git a/theme/src/shared/base.ts b/theme/src/shared/base.ts
index 85988967..eee3680b 100644
--- a/theme/src/shared/base.ts
+++ b/theme/src/shared/base.ts
@@ -9,8 +9,8 @@ export type LiteralUnion<Union extends Base, Base = string> =
 
 export type ThemeImage =
   | string
-  | { src: string, alt?: string }
-  | { dark: string, light: string, alt?: string }
+  | { src: string, alt?: string, width: string | number, height: string | number }
+  | { dark: string, light: string, alt?: string, width: string | number, height: string | number }
 
 export type ThemeIcon = string | { svg: string }