From dbad7571acd0dd1101fe2b385c4079d56b0a2be9 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 27 Mar 2022 17:24:50 +0800
Subject: [PATCH] chore: add cdnURL helper (#10439)

---
 packages/vant/docs/site/use-translate.ts      |  4 +++
 packages/vant/src/button/demo/index.vue       |  4 +--
 packages/vant/src/card/demo/index.vue         |  4 +--
 packages/vant/src/checkbox/demo/index.vue     | 11 ++++----
 .../vant/src/coupon-list/test/index.spec.ts   |  3 ++-
 packages/vant/src/dialog/demo/index.vue       |  4 +--
 packages/vant/src/empty/demo/index.vue        |  4 +--
 packages/vant/src/form/demo/FieldType.vue     |  6 ++---
 packages/vant/src/grid/demo/index.vue         | 17 +++---------
 packages/vant/src/icon/demo/index.vue         |  4 +--
 packages/vant/src/icon/test/index.spec.ts     |  3 ++-
 .../vant/src/image-preview/demo/index.vue     | 10 +++----
 .../vant/src/image-preview/test/shared.ts     |  7 ++---
 packages/vant/src/image/demo/index.vue        |  4 +--
 packages/vant/src/lazyload/demo/index.vue     | 20 +++++---------
 packages/vant/src/pull-refresh/demo/index.vue | 18 +++++--------
 packages/vant/src/radio/demo/index.vue        |  7 +++--
 packages/vant/src/share-sheet/demo/index.vue  |  8 +++---
 packages/vant/src/skeleton/demo/index.vue     |  4 +--
 packages/vant/src/swipe-cell/demo/index.vue   |  4 +--
 packages/vant/src/swipe/demo/index.vue        | 10 +++----
 packages/vant/src/tabbar/demo/index.vue       |  6 ++---
 packages/vant/src/toast/demo/index.vue        |  4 +--
 packages/vant/src/tree-select/demo/index.vue  |  6 ++---
 packages/vant/src/uploader/demo/index.vue     | 26 ++++++++-----------
 packages/vant/src/uploader/test/index.spec.ts | 14 +++++-----
 26 files changed, 94 insertions(+), 118 deletions(-)

diff --git a/packages/vant/docs/site/use-translate.ts b/packages/vant/docs/site/use-translate.ts
index 7d29e43d3..38c33dda2 100644
--- a/packages/vant/docs/site/use-translate.ts
+++ b/packages/vant/docs/site/use-translate.ts
@@ -104,3 +104,7 @@ export function useTranslate(i18n: Record<string, any>) {
 
   return createTranslate(demoName);
 }
+
+/** Generate the CDN URL of assets. */
+export const cdnURL = (path: string) =>
+  `https://cdn.jsdelivr.net/npm/@vant/assets/${path}`;
diff --git a/packages/vant/src/button/demo/index.vue b/packages/vant/src/button/demo/index.vue
index 1b328962f..9460e3105 100644
--- a/packages/vant/src/button/demo/index.vue
+++ b/packages/vant/src/button/demo/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VanButton from '..';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -107,7 +107,7 @@ const t = useTranslate({
     <van-button
       plain
       type="primary"
-      icon="https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png"
+      :icon="cdnURL('user-active.png')"
       :text="t('button')"
     />
   </demo-block>
diff --git a/packages/vant/src/card/demo/index.vue b/packages/vant/src/card/demo/index.vue
index fc2f39da8..2f5b237ec 100644
--- a/packages/vant/src/card/demo/index.vue
+++ b/packages/vant/src/card/demo/index.vue
@@ -2,7 +2,7 @@
 import VanCard from '..';
 import VanTag from '../../tag';
 import VanButton from '../../button';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -16,7 +16,7 @@ const t = useTranslate({
   },
 });
 
-const imageURL = 'https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg';
+const imageURL = cdnURL('ipad.jpeg');
 </script>
 
 <template>
diff --git a/packages/vant/src/checkbox/demo/index.vue b/packages/vant/src/checkbox/demo/index.vue
index c42b8011a..18278d9cb 100644
--- a/packages/vant/src/checkbox/demo/index.vue
+++ b/packages/vant/src/checkbox/demo/index.vue
@@ -5,7 +5,7 @@ import VanButton from '../../button';
 import VanCellGroup from '../../cell-group';
 import VanCell from '../../cell';
 import { ref, reactive } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { useRefs } from '../../composables/use-refs';
 import type { CheckboxInstance } from '../types';
 import type { CheckboxGroupInstance } from '../../checkbox-group';
@@ -49,7 +49,7 @@ const state = reactive({
   checkbox3: true,
   checkboxShape: true,
   checkboxLabel: true,
-  checboxIcon: true,
+  checkboxIcon: true,
   list: ['a', 'b'],
   result: ['a', 'b'],
   result2: [],
@@ -58,9 +58,8 @@ const state = reactive({
   horizontalResult: [],
 });
 
-const activeIcon = 'https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png';
-const inactiveIcon =
-  'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png';
+const activeIcon = cdnURL('user-active.png');
+const inactiveIcon = cdnURL('user-inactive.png');
 
 const group = ref<CheckboxGroupInstance>();
 const [refs, setRefs] = useRefs<CheckboxInstance>();
@@ -105,7 +104,7 @@ const toggleAll = () => {
   </demo-block>
 
   <demo-block :title="t('customIconSize')">
-    <van-checkbox v-model="state.checboxIcon" icon-size="24px">
+    <van-checkbox v-model="state.checkboxIcon" icon-size="24px">
       {{ t('customIconSize') }}
     </van-checkbox>
   </demo-block>
diff --git a/packages/vant/src/coupon-list/test/index.spec.ts b/packages/vant/src/coupon-list/test/index.spec.ts
index e897313b1..4f07d1f06 100644
--- a/packages/vant/src/coupon-list/test/index.spec.ts
+++ b/packages/vant/src/coupon-list/test/index.spec.ts
@@ -1,5 +1,6 @@
 import { later, mount } from '../../../test';
 import { CouponList } from '..';
+import { cdnURL } from '../../../docs/site/use-translate';
 
 const coupon = {
   id: 1,
@@ -106,7 +107,7 @@ test('should have two "van-coupon-list__empty" classes when render coupon list i
 test('should use custom src when using empty-image prop', async () => {
   const wrapper = mount(CouponList, {
     props: {
-      emptyImage: 'https://cdn.jsdelivr.net/npm/@vant/assets/xxx.jpeg',
+      emptyImage: cdnURL('xxx.jpeg'),
     },
   });
 
diff --git a/packages/vant/src/dialog/demo/index.vue b/packages/vant/src/dialog/demo/index.vue
index 43fab7105..eae16834a 100644
--- a/packages/vant/src/dialog/demo/index.vue
+++ b/packages/vant/src/dialog/demo/index.vue
@@ -2,7 +2,7 @@
 import VanCell from '../../cell';
 import { Dialog } from '..';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import type { DialogAction } from '../types';
 
 const VanDialog = Dialog.Component;
@@ -36,7 +36,7 @@ const t = useTranslate({
 });
 
 const show = ref(false);
-const image = 'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg';
+const image = cdnURL('apple-3.jpeg');
 
 const onClickAlert = () => {
   Dialog.alert({
diff --git a/packages/vant/src/empty/demo/index.vue b/packages/vant/src/empty/demo/index.vue
index 8812e680a..ceead7815 100644
--- a/packages/vant/src/empty/demo/index.vue
+++ b/packages/vant/src/empty/demo/index.vue
@@ -4,7 +4,7 @@ import VanTabs from '../../tabs';
 import VanTab from '../../tab';
 import VanButton from '../../button';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -52,7 +52,7 @@ const active = ref('error');
   <demo-block :title="t('customImage')">
     <van-empty
       class="custom-image"
-      image="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+      :image="cdnURL('custom-empty-image.png')"
       :description="t('description')"
     />
   </demo-block>
diff --git a/packages/vant/src/form/demo/FieldType.vue b/packages/vant/src/form/demo/FieldType.vue
index b1da7ca56..5fa6d7929 100644
--- a/packages/vant/src/form/demo/FieldType.vue
+++ b/packages/vant/src/form/demo/FieldType.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import VanForm from '..';
 import VanRate from '../../rate';
 import VanRadio from '../../radio';
@@ -54,9 +54,7 @@ const rate = ref(3);
 const radio = ref('1');
 const slider = ref(50);
 const stepper = ref(1);
-const uploader = ref([
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
-]);
+const uploader = ref([{ url: cdnURL('leaf.jpeg') }]);
 const checkbox = ref(false);
 const checkboxGroup = ref([]);
 const switchChecked = ref(false);
diff --git a/packages/vant/src/grid/demo/index.vue b/packages/vant/src/grid/demo/index.vue
index 81f265be5..a2f2578b8 100644
--- a/packages/vant/src/grid/demo/index.vue
+++ b/packages/vant/src/grid/demo/index.vue
@@ -2,7 +2,7 @@
 import VanGrid from '..';
 import VanGridItem from '../../grid-item';
 import VanImage from '../../image';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -48,22 +48,13 @@ const t = useTranslate({
   <demo-block :title="t('customContent')">
     <van-grid :border="false" :column-num="3">
       <van-grid-item>
-        <van-image
-          fit="contain"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
-        />
+        <van-image fit="contain" :src="cdnURL('apple-1.jpeg')" />
       </van-grid-item>
       <van-grid-item>
-        <van-image
-          fit="contain"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
-        />
+        <van-image fit="contain" :src="cdnURL('apple-2.jpeg')" />
       </van-grid-item>
       <van-grid-item>
-        <van-image
-          fit="contain"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
-        />
+        <van-image fit="contain" :src="cdnURL('apple-3.jpeg')" />
       </van-grid-item>
     </van-grid>
   </demo-block>
diff --git a/packages/vant/src/icon/demo/index.vue b/packages/vant/src/icon/demo/index.vue
index 78cb7462b..d2b105b03 100644
--- a/packages/vant/src/icon/demo/index.vue
+++ b/packages/vant/src/icon/demo/index.vue
@@ -6,7 +6,7 @@ import VanRow from '../../row';
 import VanCol from '../../col';
 import icons from '@vant/icons';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Notify } from '../../notify';
 
 // from https://30secondsofcode.org
@@ -63,7 +63,7 @@ const t = useTranslate({
 
 const tab = ref(0);
 const demoIcon = 'chat-o';
-const demoImage = 'https://cdn.jsdelivr.net/npm/@vant/assets/icon-demo.png';
+const demoImage = cdnURL('icon-demo.png');
 
 const copy = (icon: string, option: Record<string, unknown> = {}) => {
   let tag = `<van-icon name="${icon}"`;
diff --git a/packages/vant/src/icon/test/index.spec.ts b/packages/vant/src/icon/test/index.spec.ts
index 12b7b5fd3..a75bb6041 100644
--- a/packages/vant/src/icon/test/index.spec.ts
+++ b/packages/vant/src/icon/test/index.spec.ts
@@ -1,5 +1,6 @@
 import { Icon } from '..';
 import { mount } from '../../../test';
+import { cdnURL } from '../../../docs/site/use-translate';
 
 test('should render icon with builtin icon name correctly', () => {
   const wrapper = mount(Icon, {
@@ -13,7 +14,7 @@ test('should render icon with builtin icon name correctly', () => {
 test('should render icon with url name correctly', () => {
   const wrapper = mount(Icon, {
     props: {
-      name: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+      name: cdnURL('cat.jpeg'),
     },
   });
   expect(wrapper.html()).toMatchSnapshot();
diff --git a/packages/vant/src/image-preview/demo/index.vue b/packages/vant/src/image-preview/demo/index.vue
index 344b742b8..570b5bbfe 100644
--- a/packages/vant/src/image-preview/demo/index.vue
+++ b/packages/vant/src/image-preview/demo/index.vue
@@ -2,7 +2,7 @@
 import VanCell from '../../cell';
 import { ImagePreview, ImagePreviewOptions } from '..';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
 
 const VanImagePreview = ImagePreview.Component;
@@ -33,10 +33,10 @@ const t = useTranslate({
 });
 
 const images = [
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
+  cdnURL('apple-1.jpeg'),
+  cdnURL('apple-2.jpeg'),
+  cdnURL('apple-3.jpeg'),
+  cdnURL('apple-4.jpeg'),
 ];
 
 const show = ref(false);
diff --git a/packages/vant/src/image-preview/test/shared.ts b/packages/vant/src/image-preview/test/shared.ts
index 6888d96e2..090a0a354 100644
--- a/packages/vant/src/image-preview/test/shared.ts
+++ b/packages/vant/src/image-preview/test/shared.ts
@@ -1,10 +1,11 @@
 import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
+import { cdnURL } from '../../../docs/site/use-translate';
 import { trigger } from '../../../test';
 
 export const images = [
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
+  cdnURL('apple-1.jpeg'),
+  cdnURL('apple-2.jpeg'),
+  cdnURL('apple-3.jpeg'),
 ];
 
 function triggerTwoFingerTouchmove(
diff --git a/packages/vant/src/image/demo/index.vue b/packages/vant/src/image/demo/index.vue
index bbca12ae3..4897ad25d 100644
--- a/packages/vant/src/image/demo/index.vue
+++ b/packages/vant/src/image/demo/index.vue
@@ -3,7 +3,7 @@ import VanRow from '../../row';
 import VanImage from '..';
 import VanCol from '../../col';
 import VanLoading from '../../loading';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -28,7 +28,7 @@ const t = useTranslate({
   },
 });
 
-const image = 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg';
+const image = cdnURL('cat.jpeg');
 const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const;
 const positions1 = ['left', 'center', 'right'] as const;
 const positions2 = ['top', 'center', 'bottom'] as const;
diff --git a/packages/vant/src/lazyload/demo/index.vue b/packages/vant/src/lazyload/demo/index.vue
index 099acd002..225a8a0f4 100644
--- a/packages/vant/src/lazyload/demo/index.vue
+++ b/packages/vant/src/lazyload/demo/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Lazyload from '..';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 if (window.app) {
   window.app.use(Lazyload, { lazyComponent: true });
@@ -18,19 +18,13 @@ const t = useTranslate({
 });
 
 const imageList = [
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
-];
-const backgroundImageList = [
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
-];
-const componentImageList = [
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
+  cdnURL('apple-1.jpeg'),
+  cdnURL('apple-2.jpeg'),
+  cdnURL('apple-3.jpeg'),
+  cdnURL('apple-4.jpeg'),
 ];
+const backgroundImageList = [cdnURL('apple-5.jpeg'), cdnURL('apple-6.jpeg')];
+const componentImageList = [cdnURL('apple-8.jpeg'), cdnURL('apple-7.jpeg')];
 </script>
 
 <template>
diff --git a/packages/vant/src/pull-refresh/demo/index.vue b/packages/vant/src/pull-refresh/demo/index.vue
index bc40a1277..664fc47b6 100644
--- a/packages/vant/src/pull-refresh/demo/index.vue
+++ b/packages/vant/src/pull-refresh/demo/index.vue
@@ -3,7 +3,7 @@ import VanTabs from '../../tabs';
 import VanTab from '../../tab';
 import VanPullRefresh from '..';
 import { computed, onMounted, ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
 
 const t = useTranslate({
@@ -48,8 +48,8 @@ const preloadImage = () => {
   const doge = new Image();
   const dogeFire = new Image();
 
-  doge.src = 'https://cdn.jsdelivr.net/npm/@vant/assets/doge.png';
-  dogeFire.src = 'https://cdn.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg';
+  doge.src = cdnURL('doge.png');
+  dogeFire.src = cdnURL('doge-fire.jpeg');
 };
 
 onMounted(preloadImage);
@@ -82,21 +82,15 @@ onMounted(preloadImage);
         <template #pulling="{ distance }">
           <img
             class="doge"
-            src="https://cdn.jsdelivr.net/npm/@vant/assets/doge.png"
+            :src="cdnURL('doge.png')"
             :style="{ transform: `scale(${distance / 80})` }"
           />
         </template>
         <template #loosing>
-          <img
-            src="https://cdn.jsdelivr.net/npm/@vant/assets/doge.png"
-            class="doge"
-          />
+          <img :src="cdnURL('doge.png')" class="doge" />
         </template>
         <template #loading>
-          <img
-            src="https://cdn.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
-            class="doge"
-          />
+          <img :src="cdnURL('doge-fire.jpeg')" class="doge" />
         </template>
         <p>{{ tips }}</p>
       </van-pull-refresh>
diff --git a/packages/vant/src/radio/demo/index.vue b/packages/vant/src/radio/demo/index.vue
index 7e565a651..6a529df7f 100644
--- a/packages/vant/src/radio/demo/index.vue
+++ b/packages/vant/src/radio/demo/index.vue
@@ -4,7 +4,7 @@ import VanRadio from '..';
 import VanCellGroup from '../../cell-group';
 import VanCell from '../../cell';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -42,9 +42,8 @@ const radioLabel = ref('1');
 const radioShape = ref('1');
 const radioIconSize = ref('1');
 const radioHorizontal = ref('1');
-const activeIcon = 'https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png';
-const inactiveIcon =
-  'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png';
+const activeIcon = cdnURL('user-active.png');
+const inactiveIcon = cdnURL('user-inactive.png');
 </script>
 
 <template>
diff --git a/packages/vant/src/share-sheet/demo/index.vue b/packages/vant/src/share-sheet/demo/index.vue
index d887bc8b8..67f9d9c26 100644
--- a/packages/vant/src/share-sheet/demo/index.vue
+++ b/packages/vant/src/share-sheet/demo/index.vue
@@ -2,7 +2,7 @@
 import VanCell from '../../cell';
 import VanShareSheet, { ShareSheetOption, ShareSheetOptions } from '..';
 import { ref, computed } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
 
 const t = useTranslate({
@@ -73,15 +73,15 @@ const multiLineOptions = computed(() => [
 const customIconOptions = computed(() => [
   {
     name: t('name'),
-    icon: 'https://cdn.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',
+    icon: cdnURL('custom-icon-fire.png'),
   },
   {
     name: t('name'),
-    icon: 'https://cdn.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',
+    icon: cdnURL('custom-icon-light.png'),
   },
   {
     name: t('name'),
-    icon: 'https://cdn.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',
+    icon: cdnURL('custom-icon-water.png'),
   },
 ]);
 
diff --git a/packages/vant/src/skeleton/demo/index.vue b/packages/vant/src/skeleton/demo/index.vue
index 29648f070..b9ca452c1 100644
--- a/packages/vant/src/skeleton/demo/index.vue
+++ b/packages/vant/src/skeleton/demo/index.vue
@@ -2,7 +2,7 @@
 import VanSkeleton from '..';
 import VanSwitch from '../../switch';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -35,7 +35,7 @@ const show = ref(false);
     <van-switch v-model="show" size="24px" />
     <van-skeleton title avatar :row="3" :loading="!show">
       <div class="demo-preview">
-        <img src="https://cdn.jsdelivr.net/npm/@vant/assets/logo.png" />
+        <img :src="cdnURL('logo.png')" />
         <div class="demo-content">
           <h3>{{ t('title') }}</h3>
           <p>{{ t('desc') }}</p>
diff --git a/packages/vant/src/swipe-cell/demo/index.vue b/packages/vant/src/swipe-cell/demo/index.vue
index ebde24645..03b14dacd 100644
--- a/packages/vant/src/swipe-cell/demo/index.vue
+++ b/packages/vant/src/swipe-cell/demo/index.vue
@@ -3,7 +3,7 @@ import VanSwipeCell from '..';
 import VanButton from '../../button';
 import VanCell from '../../cell';
 import VanCard from '../../card';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Dialog } from '../../dialog';
 
 const t = useTranslate({
@@ -29,7 +29,7 @@ const t = useTranslate({
   },
 });
 
-const imageURL = 'https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg';
+const imageURL = cdnURL('ipad.jpeg');
 
 const beforeClose = ({ position }: { position: string }) => {
   switch (position) {
diff --git a/packages/vant/src/swipe/demo/index.vue b/packages/vant/src/swipe/demo/index.vue
index da6ffb525..9e2b47aa0 100644
--- a/packages/vant/src/swipe/demo/index.vue
+++ b/packages/vant/src/swipe/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import VanSwipe from '..';
 import VanSwipeItem from '../../swipe-item';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
 
 const t = useTranslate({
@@ -24,10 +24,10 @@ const t = useTranslate({
 });
 
 const images = [
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
+  cdnURL('apple-1.jpeg'),
+  cdnURL('apple-2.jpeg'),
+  cdnURL('apple-3.jpeg'),
+  cdnURL('apple-4.jpeg'),
 ];
 
 const onChange = (index: number) => Toast(t('message') + index);
diff --git a/packages/vant/src/tabbar/demo/index.vue b/packages/vant/src/tabbar/demo/index.vue
index 623007c9d..efd8b400f 100644
--- a/packages/vant/src/tabbar/demo/index.vue
+++ b/packages/vant/src/tabbar/demo/index.vue
@@ -2,7 +2,7 @@
 import VanTabbar from '..';
 import VanTabbarItem from '../../tabbar-item';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
 
 const t = useTranslate({
@@ -30,8 +30,8 @@ const active5 = ref(0);
 const activeName = ref('home');
 
 const icon = {
-  active: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png',
-  inactive: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png',
+  active: cdnURL('user-active.png'),
+  inactive: cdnURL('user-inactive.png'),
 };
 
 const onChange = (index: number) => {
diff --git a/packages/vant/src/toast/demo/index.vue b/packages/vant/src/toast/demo/index.vue
index c4f2785c0..9af29beca 100644
--- a/packages/vant/src/toast/demo/index.vue
+++ b/packages/vant/src/toast/demo/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VanCell from '../../cell';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '..';
 import type { LoadingType } from '../../loading';
 
@@ -83,7 +83,7 @@ const showIconToast = () => {
 const showImageToast = () => {
   Toast({
     message: t('customImage'),
-    icon: 'https://cdn.jsdelivr.net/npm/@vant/assets/logo.png',
+    icon: cdnURL('logo.png'),
   });
 };
 
diff --git a/packages/vant/src/tree-select/demo/index.vue b/packages/vant/src/tree-select/demo/index.vue
index cdc50fa33..1f42b61cb 100644
--- a/packages/vant/src/tree-select/demo/index.vue
+++ b/packages/vant/src/tree-select/demo/index.vue
@@ -2,7 +2,7 @@
 import VanTreeSelect from '..';
 import VanImage from '../../image';
 import { ref, computed } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { zhCNData } from './data-zh';
 import { enUSData } from './data-en';
 import { deepClone } from '../../utils/deep-clone';
@@ -73,12 +73,12 @@ const badgeItems = computed(() => {
         <van-image
           v-if="activeIndex3 === 0"
           :show-loading="false"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
+          :src="cdnURL('apple-1.jpeg')"
         />
         <van-image
           v-if="activeIndex3 === 1"
           :show-loading="false"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
+          :src="cdnURL('apple-2.jpeg')"
         />
       </template>
     </van-tree-select>
diff --git a/packages/vant/src/uploader/demo/index.vue b/packages/vant/src/uploader/demo/index.vue
index 222703461..4a489f77b 100644
--- a/packages/vant/src/uploader/demo/index.vue
+++ b/packages/vant/src/uploader/demo/index.vue
@@ -2,7 +2,7 @@
 import VanUploader from '..';
 import VanButton from '../../button';
 import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
+import { cdnURL, useTranslate } from '../../../docs/site/use-translate';
 import { UploaderFileListItem } from '../types';
 import { Toast } from '../../toast';
 
@@ -48,42 +48,38 @@ const t = useTranslate({
 });
 
 const fileList = ref([
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg' },
+  { url: cdnURL('leaf.jpeg') },
+  { url: cdnURL('tree.jpeg') },
 ]);
 
-const fileList2 = ref([
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg' },
-]);
+const fileList2 = ref([{ url: cdnURL('sand.jpeg') }]);
 
 const fileList3 = ref([]);
 
-const fileList4 = ref([
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg' },
-]);
+const fileList4 = ref([{ url: cdnURL('sand.jpeg') }]);
 
 const fileList5 = ref<UploaderFileListItem[]>([
   {
-    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg',
+    url: cdnURL('sand.jpeg'),
     deletable: true,
     beforeDelete: () => {
       Toast(t('deleteMessage'));
     },
   },
   {
-    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
+    url: cdnURL('tree.jpeg'),
     imageFit: 'contain',
   },
 ]);
 
 const statusFileList = ref<UploaderFileListItem[]>([
   {
-    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
+    url: cdnURL('leaf.jpeg'),
     status: 'uploading',
     message: t('uploading'),
   },
   {
-    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
+    url: cdnURL('tree.jpeg'),
     status: 'failed',
     message: t('failed'),
   },
@@ -91,7 +87,7 @@ const statusFileList = ref<UploaderFileListItem[]>([
 
 const previewCoverFiles = ref<UploaderFileListItem[]>([
   {
-    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
+    url: cdnURL('leaf.jpeg'),
     file: {
       name: t('imageName'),
     } as File,
@@ -100,7 +96,7 @@ const previewCoverFiles = ref<UploaderFileListItem[]>([
 
 const previewSizeFiles = ref<UploaderFileListItem[]>([
   {
-    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
+    url: cdnURL('leaf.jpeg'),
   },
 ]);
 
diff --git a/packages/vant/src/uploader/test/index.spec.ts b/packages/vant/src/uploader/test/index.spec.ts
index 94b4b4419..fc1e3ee7d 100644
--- a/packages/vant/src/uploader/test/index.spec.ts
+++ b/packages/vant/src/uploader/test/index.spec.ts
@@ -1,3 +1,4 @@
+import { cdnURL } from '../../../docs/site/use-translate';
 import { nextTick } from 'vue';
 import Uploader, { UploaderFileListItem } from '..';
 import { mount, later, triggerDrag } from '../../../test';
@@ -6,8 +7,8 @@ const mockFileDataUrl = 'data:image/test';
 const mockFile = new File([new ArrayBuffer(10000)], 'test.jpg', {
   type: 'test',
 });
-const IMAGE = 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg';
-const PDF = 'https://cdn.jsdelivr.net/npm/@vant/assets/test.pdf';
+const IMAGE = cdnURL('cat.jpeg');
+const PDF = cdnURL('test.pdf');
 
 function mockFileReader() {
   function mockReadAsText(this: FileReader) {
@@ -293,8 +294,8 @@ test('render preview image', async () => {
   const wrapper = mount(Uploader, {
     props: {
       modelValue: [
-        { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
-        { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/test.pdf' },
+        { url: cdnURL('cat.jpeg') },
+        { url: cdnURL('test.pdf') },
         { file: mockFile },
       ],
     },
@@ -307,9 +308,7 @@ test('image-fit prop', () => {
   const wrapper = mount(Uploader, {
     props: {
       imageFit: 'contain',
-      modelValue: [
-        { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
-      ],
+      modelValue: [{ url: cdnURL('cat.jpeg') }],
     },
   });
 
@@ -368,7 +367,6 @@ test('should allow to custom size by preview-size prop', async () => {
     },
   });
 
-  console.log(wrapper.html());
   const image = wrapper.find('.van-uploader__file');
   expect(image.style.width).toEqual('30px');
   expect(image.style.height).toEqual('30px');