feat(Image): add loading-icon prop (#5469)

src/image/README.md

@@ -78,6 +78,7 @@ Vue.use(Lazyload);
 | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | - |
 | show-error | Whether to show error placeholder | *boolean* | `true` | 2.0.9 |
 | show-loading | Whether to show loading placeholder | *boolean* | `true` | 2.0.9 |
+| loading-icon | Loading icon | *string* | `photo-o` | 2.4.2 |
 
 ### fit optional value
 

src/image/README.zh-CN.md

@@ -104,6 +104,7 @@ Vue.use(Image);
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | - |
 | show-error | 是否展示图片加载失败提示 | *boolean* | `true` | 2.0.9 |
 | show-loading | 是否展示图片加载中提示 | *boolean* | `true` | 2.0.9 |
+| loading-icon | 加载时提示的图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `photo-o` | 2.4.2 |
 
 ### 图片填充模式
 

src/image/demo/index.vue

@@ -2,27 +2,14 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-row>
-        <van-image
+        <van-image width="100" height="100" :src="image" />
-          width="100"
-          height="100"
-          :src="image"
-        />
       </van-row>
     </demo-block>
 
     <demo-block :title="$t('fitMode')">
       <van-row gutter="20">
-        <van-col
+        <van-col v-for="fit in fits" span="8" :key="fit">
-          v-for="fit in fits"
+          <van-image :fit="fit" width="100%" height="27vw" :src="image" />
-          span="8"
-          :key="fit"
-        >
-          <van-image
-            :fit="fit"
-            width="100%"
-            height="27vw"
-            :src="image"
-          />
           <div class="text">{{ fit }}</div>
         </van-col>
       </van-row>
@@ -30,18 +17,8 @@
 
     <demo-block :title="$t('round')">
       <van-row gutter="20">
-        <van-col
+        <van-col v-for="fit in fits" span="8" :key="fit">
-          v-for="fit in fits"
+          <van-image round :fit="fit" width="100%" height="27vw" :src="image" />
-          span="8"
-          :key="fit"
-        >
-          <van-image
-            round
-            :fit="fit"
-            width="100%"
-            height="27vw"
-            :src="image"
-          />
           <div class="text">{{ fit }}</div>
         </van-col>
       </van-row>
@@ -50,23 +27,14 @@
     <demo-block :title="$t('loading')">
       <van-row gutter="20">
         <van-col span="8">
-          <van-image
+          <van-image width="100%" height="27vw" />
-            width="100%"
-            height="27vw"
-          />
           <div class="text">{{ $t('defaultTip') }}</div>
         </van-col>
 
         <van-col span="8">
-          <van-image
+          <van-image width="100%" height="27vw">
-            width="100%"
-            height="27vw"
-          >
             <template #loading>
-              <van-loading
+              <van-loading type="spinner" size="20" />
-                type="spinner"
-                size="20"
-              />
             </template>
           </van-image>
           <div class="text">{{ $t('customTip') }}</div>
@@ -77,20 +45,12 @@
     <demo-block :title="$t('error')">
       <van-row gutter="20">
         <van-col span="8">
-          <van-image
+          <van-image width="100%" height="27vw" src="x" />
-            width="100%"
-            height="27vw"
-            src="x"
-          />
           <div class="text">{{ $t('defaultTip') }}</div>
         </van-col>
 
         <van-col span="8">
-          <van-image
+          <van-image width="100%" height="27vw" src="x">
-            width="100%"
-            height="27vw"
-            src="x"
-          >
             <template #error>{{ $t('loadFail') }}</template>
           </van-image>
           <div class="text">{{ $t('customTip') }}</div>
@@ -133,7 +93,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-image {
   overflow-x: hidden;

src/image/index.js

@@ -20,6 +20,10 @@ export default createComponent({
     showLoading: {
       type: Boolean,
       default: true
+    },
+    loadingIcon: {
+      type: String,
+      default: 'photo-o'
     }
   },
 
@@ -109,7 +113,7 @@ export default createComponent({
         return (
           <div class={bem('loading')}>
             {this.slots('loading') || (
-              <Icon name="photo-o" class={bem('loading-icon')} />
+              <Icon name={this.loadingIcon} class={bem('loading-icon')} />
             )}
           </div>
         );

src/image/test/__snapshots__/index.spec.js.snap

@@ -25,6 +25,13 @@ exports[`load event 2`] = `
 </div>
 `;
 
+exports[`loading-icon prop 1`] = `
+<div class="van-image"><img class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-success van-image__loading-icon">
+      <!----></i></div>
+</div>
+`;
+
 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">

src/image/test/index.spec.js

@@ -125,6 +125,16 @@ test('show-error prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('loading-icon prop', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      loadingIcon: 'success'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('radius prop', () => {
   const wrapper = mount(Image, {
     propsData: {