[improvement] Toast: optimize image icon display (#3895)

src/button/test/__snapshots__/demo.spec.js.snap

@@ -19,10 +19,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
         <!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
         <!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
-        <div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img" style="object-fit: contain;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
-              <!----></i></div>
-        </div>
+        <div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img" style="object-fit: contain;"></div>
         <!---->
       </i><span class="van-button__text">按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">

src/icon/index.tsx

@@ -44,7 +44,9 @@ function Icon(
       {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
-      {imageIcon && <Image class={bem('image')} fit="contain" src={props.name} />}
+      {imageIcon && (
+        <Image class={bem('image')} fit="contain" src={props.name} showLoading={false} />
+      )}
       <Info info={props.info} />
     </props.tag>
   );

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

@@ -12,20 +12,14 @@ exports[`render icon with builtin icon name 1`] = `
 
 exports[`render icon with local image 1`] = `
 <i class="van-icon">
-  <div class="van-image van-icon__image"><img src="/assets/icon.jpg" class="van-image__img" style="object-fit: contain;">
-    <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
-        <!----></i></div>
-  </div>
+  <div class="van-image van-icon__image"><img src="/assets/icon.jpg" class="van-image__img" style="object-fit: contain;"></div>
   <!---->
 </i>
 `;
 
 exports[`render icon with url name 1`] = `
 <i class="van-icon">
-  <div class="van-image van-icon__image"><img src="https://img.yzcdn.com/icon.jpg" class="van-image__img" style="object-fit: contain;">
-    <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
-        <!----></i></div>
-  </div>
+  <div class="van-image van-icon__image"><img src="https://img.yzcdn.com/icon.jpg" class="van-image__img" style="object-fit: contain;"></div>
   <!---->
 </i>
 `;

src/image/README.md

@@ -75,7 +75,7 @@ Vue.use(Lazyload);
 | round | Whether to be round | `boolean` | `false` | - |
 | 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` |
-| loading-placeholder | Whether to show loading placeholder | `boolean` | `true` |
+| show-loading | Whether to show loading placeholder | `boolean` | `true` |
 
 ### fit optional value
 

src/image/README.zh-CN.md

@@ -96,12 +96,12 @@ Vue.use(Image);
 | src | 图片链接 | `string` | - | - |
 | fit | 图片填充模式 | `string` | `fill` | - |
 | alt | 替代文本 | `string` | - | - |
-| width | 宽度，默认单位为 px | `string | number` | - | - |
-| height | 高度，默认单位为 px | `string | number` | - | - |
+| width | 宽度，默认单位为`px` | `string | number` | - | - |
+| height | 高度，默认单位为`px` | `string | number` | - | - |
 | round | 是否显示为圆形 | `boolean` | `false` | - |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `boolean` | `false` | - |
 | show-error | 是否展示图片加载失败提示 | `boolean` | `true` | 2.0.9 |
-| loading-placeholder | 是否展示图片加载中提示 | `boolean` | `true` | 2.0.9 |
+| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | `2.0.9` |
 
 ### 图片填充模式
 

src/image/index.js

@@ -16,7 +16,7 @@ export default createComponent({
       type: Boolean,
       default: true
     },
-    loadingPlaceholder: {
+    showLoading: {
       type: Boolean,
       default: true
     }
@@ -99,7 +99,7 @@ export default createComponent({
     },
 
     renderPlaceholder() {
-      if (this.loading && this.loadingPlaceholder) {
+      if (this.loading && this.showLoading) {
         return (
           <div class={bem('loading')}>
             {this.slots('loading') || <Icon name="photo-o" size="22" />}

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

@@ -25,6 +25,6 @@ exports[`load event 2`] = `
 </div>
 `;
 
-exports[`loading-placeholder prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
+exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
 
 exports[`show-error prop 1`] = `<div class="van-image"></div>`;

src/image/test/index.spec.js

@@ -102,10 +102,10 @@ test('lazy-load error event', done => {
   });
 });
 
-test('loading-placeholder prop', () => {
+test('show-loading prop', () => {
   const wrapper = mount(Image, {
     propsData: {
-      loadingPlaceholder: false
+      showLoading: false
     }
   });