blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

style(Image): update loading icon and error icon (#6890)

Browse Source
This commit is contained in:
neverland 2020-07-29 09:36:15 +08:00 committed by GitHub
parent 01d1f05e15
commit 378009fefa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/card/test/__snapshots__/demo.spec.js.snap
View File

@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</a>
@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
@ -54,7 +54,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</a>

2
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -175,7 +175,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">

6
src/grid/test/__snapshots__/demo.spec.js.snap
View File

@ -55,7 +55,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</div>
@ -63,7 +63,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</div>
@ -71,7 +71,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
<div class="van-grid-item__content van-grid-item__content--center">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</div>

4
src/image/README.md
View File

@ -75,8 +75,8 @@ Vue.use(Lazyload);
| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
| show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` |
| show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` |
| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` |
| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` |
| error-icon `v2.4.2` | Error icon | _string_ | `photo-fail` |
| loading-icon `v2.4.2` | Loading icon | _string_ | `photo` |
### fit optional value

4
src/image/README.zh-CN.md
View File

@ -107,8 +107,8 @@ Vue.use(Lazyload);
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
| show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` |
| show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` |
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` |
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` |
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |
### 图片填充模式 

4
src/image/index.js
View File

@ -23,11 +23,11 @@ export default createComponent({
},
errorIcon: {
type: String,
default: 'warning-o',
default: 'photo-fail',
},
loadingIcon: {
type: String,
default: 'photo-o',
default: 'photo',
},
},

2
src/image/index.less
View File

@ -36,10 +36,12 @@
}
&__loading-icon {
color: @image-loading-icon-color;
font-size: @image-loading-icon-size;
}
&__error-icon {
color: @image-error-icon-color;
font-size: @image-error-icon-size;
}
}

28
src/image/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-row">
<div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</div>
@ -14,35 +14,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">scale-down</div>
@ -53,35 +53,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">scale-down</div>
@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
@ -111,14 +111,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">自定义提示</div>

10
src/image/test/__snapshots__/index.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`default slot 1`] = `
<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>Custom Default
</div>
`;
@ -16,14 +16,14 @@ exports[`error-icon prop 1`] = `
exports[`lazy load 1`] = `
<div class="van-image"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`lazy-load error event 1`] = `
<div class="van-image">
<div class="van-image__error"><i class="van-icon van-icon-warning-o van-image__error-icon">
<div class="van-image__error"><i class="van-icon van-icon-photo-fail van-image__error-icon">
<!----></i></div>
</div>
`;
@ -34,7 +34,7 @@ exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn
exports[`load event 2`] = `
<div class="van-image"><img src="" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
`;
@ -48,7 +48,7 @@ exports[`loading-icon prop 1`] = `
exports[`radius prop 1`] = `
<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
`;

6
src/style/var.less
View File

@ -424,8 +424,10 @@
@image-placeholder-text-color: @gray-6;
@image-placeholder-font-size: @font-size-md;
@image-placeholder-background-color: @background-color;
@image-loading-icon-size: 22px;
@image-error-icon-size: 22px;
@image-loading-icon-size: 32px;
@image-loading-icon-color: @gray-3;
@image-error-icon-size: 32px;
@image-error-icon-color: @gray-3;
// ImagePreview
@image-preview-index-text-color: @white;

2
src/swipe-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
</a>

14
src/uploader/test/__snapshots__/demo.spec.js.snap
View File

@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -39,7 +39,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__mask">
@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__mask"><i class="van-icon van-icon-close van-uploader__mask-icon">
@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -85,7 +85,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -113,7 +113,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
<div class="van-uploader__preview-cover">
<div class="preview-cover van-ellipsis">图片名称</div>

16
src/uploader/test/__snapshots__/index.spec.js.snap
View File

@ -23,7 +23,7 @@ exports[`file message should be reactive 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__mask">
@ -42,7 +42,7 @@ exports[`image-fit prop 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -59,7 +59,7 @@ exports[`max-count prop 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -74,7 +74,7 @@ exports[`preview-cover slot 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
<div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
</div>
@ -83,7 +83,7 @@ exports[`preview-cover slot 1`] = `
</div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
<div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
</div>
@ -101,7 +101,7 @@ exports[`preview-size prop 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview" style="">
<div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -118,7 +118,7 @@ exports[`render preview image 1`] = `
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -142,7 +142,7 @@ exports[`render preview image 1`] = `
</div>
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
<!----></i></div>
</div>
<div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">