chore: add cdnURL helper (#10439)

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}`;

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>

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>

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 activeIcon = cdnURL('user-active.png');
-const inactiveIcon =
+const inactiveIcon = cdnURL('user-inactive.png');
-  'https://cdn.jsdelivr.net/npm/@vant/assets/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>

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'),
     },
   });
 

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({

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>

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([
+const uploader = ref([{ url: cdnURL('leaf.jpeg') }]);
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
-]);
 const checkbox = ref(false);
 const checkboxGroup = ref([]);
 const switchChecked = ref(false);

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
+        <van-image fit="contain" :src="cdnURL('apple-1.jpeg')" />
-          fit="contain"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
-        />
       </van-grid-item>
       <van-grid-item>
-        <van-image
+        <van-image fit="contain" :src="cdnURL('apple-2.jpeg')" />
-          fit="contain"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
-        />
       </van-grid-item>
       <van-grid-item>
-        <van-image
+        <van-image fit="contain" :src="cdnURL('apple-3.jpeg')" />
-          fit="contain"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
-        />
       </van-grid-item>
     </van-grid>
   </demo-block>

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}"`;

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();

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',
+  cdnURL('apple-1.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
+  cdnURL('apple-2.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
+  cdnURL('apple-3.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
+  cdnURL('apple-4.jpeg'),
 ];
 
 const show = ref(false);

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',
+  cdnURL('apple-1.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
+  cdnURL('apple-2.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
+  cdnURL('apple-3.jpeg'),
 ];
 
 function triggerTwoFingerTouchmove(

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;

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',
+  cdnURL('apple-1.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
+  cdnURL('apple-2.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
+  cdnURL('apple-3.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
+  cdnURL('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',
 ];
+const backgroundImageList = [cdnURL('apple-5.jpeg'), cdnURL('apple-6.jpeg')];
+const componentImageList = [cdnURL('apple-8.jpeg'), cdnURL('apple-7.jpeg')];
 </script>
 
 <template>

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';
+  doge.src = cdnURL('doge.png');
-  dogeFire.src = 'https://cdn.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg';
+  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
+          <img :src="cdnURL('doge.png')" class="doge" />
-            src="https://cdn.jsdelivr.net/npm/@vant/assets/doge.png"
-            class="doge"
-          />
         </template>
         <template #loading>
-          <img
+          <img :src="cdnURL('doge-fire.jpeg')" class="doge" />
-            src="https://cdn.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
-            class="doge"
-          />
         </template>
         <p>{{ tips }}</p>
       </van-pull-refresh>

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 activeIcon = cdnURL('user-active.png');
-const inactiveIcon =
+const inactiveIcon = cdnURL('user-inactive.png');
-  'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png';
 </script>
 
 <template>

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'),
   },
 ]);
 

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>

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) {

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',
+  cdnURL('apple-1.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
+  cdnURL('apple-2.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
+  cdnURL('apple-3.jpeg'),
-  'https://cdn.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
+  cdnURL('apple-4.jpeg'),
 ];
 
 const onChange = (index: number) => Toast(t('message') + index);

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',
+  active: cdnURL('user-active.png'),
-  inactive: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png',
+  inactive: cdnURL('user-inactive.png'),
 };
 
 const onChange = (index: number) => {

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'),
   });
 };
 

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>

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: cdnURL('leaf.jpeg') },
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg' },
+  { url: cdnURL('tree.jpeg') },
 ]);
 
-const fileList2 = ref([
+const fileList2 = ref([{ url: cdnURL('sand.jpeg') }]);
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg' },
-]);
 
 const fileList3 = ref([]);
 
-const fileList4 = ref([
+const fileList4 = ref([{ url: cdnURL('sand.jpeg') }]);
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/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'),
   },
 ]);
 

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 IMAGE = cdnURL('cat.jpeg');
-const PDF = 'https://cdn.jsdelivr.net/npm/@vant/assets/test.pdf';
+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: cdnURL('cat.jpeg') },
-        { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/test.pdf' },
+        { url: cdnURL('test.pdf') },
         { file: mockFile },
       ],
     },
@@ -307,9 +308,7 @@ test('image-fit prop', () => {
   const wrapper = mount(Uploader, {
     props: {
       imageFit: 'contain',
-      modelValue: [
+      modelValue: [{ url: cdnURL('cat.jpeg') }],
-        { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/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');