[new feature] Image: add loading-placeholder prop (#3893)

src/image/README.md

@@ -33,6 +33,8 @@ Vue.use(Image);
 
 ### Round
 
+Show round image, it may not works at `fit=contain` and `fit=scale-down`
+
 ```html
 <van-image
   round
@@ -67,11 +69,12 @@ Vue.use(Lazyload);
 |------|------|------|------|
 | src | Src | `string` | - | - |
 | fit | Fit mode | `string` | `fill` | - |
-| round | Round，when img width not eq height it may not works at `fit=contain` and `fit=scale-down`  | `boolean` | `false` | - |
 | alt | Alt | `string` | - | - |
 | width | Width | `string | number` | - | - |
 | height | Height | `string | number` | - | - |
+| round | Whether to be round | `boolean` | `false` | - |
 | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | `boolean` | `false` | - |
+| loading-placeholder | Whether to show loading placeholder | `boolean` | `true` |
 
 ### fit optional value
 

src/image/README.zh-CN.md

@@ -41,7 +41,7 @@ Vue.use(Image);
 
 ### 圆形图片
 
-通过`round`属性可以设置图片变圆
+通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
 
 ```html
 <van-image
@@ -95,11 +95,12 @@ Vue.use(Image);
 |------|------|------|------|------|
 | src | 图片链接 | `string` | - | - |
 | fit | 图片填充模式 | `string` | `fill` | - |
-| round | 圆形图片，当图片宽高不相等时 `fit=contain` 和 `fit=scale-down` 可能无法实现「圆形」图片 | `boolean` | `false` | - |
 | alt | 替代文本 | `string` | - | - |
 | width | 宽度，默认单位为 px | `string | number` | - | - |
 | height | 高度，默认单位为 px | `string | number` | - | - |
+| round | 是否显示为圆形 | `boolean` | `false` | - |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `boolean` | `false` | - |
+| loading-placeholder | 是否展示图片加载中提示 | `boolean` | `true` | `2.0.9` |
 
 ### 图片填充模式
 

src/image/index.js

@@ -5,13 +5,17 @@ const [createComponent, bem] = createNamespace('image');
 
 export default createComponent({
   props: {
-    round: Boolean,
     src: String,
     fit: String,
     alt: String,
-    lazyLoad: Boolean,
+    round: Boolean,
     width: [Number, String],
-    height: [Number, String]
+    height: [Number, String],
+    lazyLoad: Boolean,
+    loadingPlaceholder: {
+      type: Boolean,
+      default: true
+    }
   },
 
   data() {
@@ -91,7 +95,7 @@ export default createComponent({
     },
 
     renderPlaceholder() {
-      if (this.loading) {
+      if (this.loading && this.loadingPlaceholder) {
         return (
           <div class={bem('loading')}>
             {this.slots('loading') || <Icon name="photo-o" size="22" />}

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

@@ -24,3 +24,5 @@ exports[`load event 2`] = `
       <!----></i></div>
 </div>
 `;
+
+exports[`loading-placeholder prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;

src/image/test/index.spec.js

@@ -101,3 +101,13 @@ test('lazy-load error event', done => {
     }
   });
 });
+
+test('loading-placeholder prop', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      loadingPlaceholder: false
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});