From dc0fba3be3e598b88fea25cee00ccd7e4b14d298 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 19 Jul 2019 09:55:42 +0800
Subject: [PATCH] [improvement] Toast: optimize image icon display (#3895)

---
 src/button/test/__snapshots__/demo.spec.js.snap |  5 +----
 src/icon/index.tsx                              |  4 +++-
 src/icon/test/__snapshots__/index.spec.js.snap  | 10 ++--------
 src/image/README.md                             |  2 +-
 src/image/README.zh-CN.md                       |  6 +++---
 src/image/index.js                              |  4 ++--
 src/image/test/__snapshots__/index.spec.js.snap |  2 +-
 src/image/test/index.spec.js                    |  4 ++--
 8 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
index a0bd8e34c..023567c35 100644
--- a/src/button/test/__snapshots__/demo.spec.js.snap
+++ b/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">
diff --git a/src/icon/index.tsx b/src/icon/index.tsx
index 468c2804e..1d526a20b 100644
--- a/src/icon/index.tsx
+++ b/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>
   );
diff --git a/src/icon/test/__snapshots__/index.spec.js.snap b/src/icon/test/__snapshots__/index.spec.js.snap
index 25dd41d44..91752cd39 100644
--- a/src/icon/test/__snapshots__/index.spec.js.snap
+++ b/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>
 `;
diff --git a/src/image/README.md b/src/image/README.md
index 7206cfddb..0787f4f37 100644
--- a/src/image/README.md
+++ b/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
 
diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md
index ad26551fd..25ca86c38 100644
--- a/src/image/README.zh-CN.md
+++ b/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` |
 
 ### 图片填充模式
 
diff --git a/src/image/index.js b/src/image/index.js
index 1ef7ab96d..1fc3d610f 100644
--- a/src/image/index.js
+++ b/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" />}
diff --git a/src/image/test/__snapshots__/index.spec.js.snap b/src/image/test/__snapshots__/index.spec.js.snap
index dbe794b5d..876d58483 100644
--- a/src/image/test/__snapshots__/index.spec.js.snap
+++ b/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>`;
diff --git a/src/image/test/index.spec.js b/src/image/test/index.spec.js
index 29e9bc37e..91f514832 100644
--- a/src/image/test/index.spec.js
+++ b/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
     }
   });