fix(VImg): render gradient when src isn't provided

fixes #11729
vuetifyjs · Jun 27, 2020 · c0fa6d5 · c0fa6d5
1 parent fbf110e
commit c0fa6d5
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 24 deletions.
diff --git a/packages/vuetify/src/components/VImg/VImg.ts b/packages/vuetify/src/components/VImg/VImg.ts
@@ -99,7 +99,7 @@ export default mixins(
         }
     },
     __cachedImage (): VNode | [] {
-      if (!(this.normalisedSrc.src || this.normalisedSrc.lazySrc)) return []
+      if (!(this.normalisedSrc.src || this.normalisedSrc.lazySrc || this.gradient)) return []
 
       const backgroundImage: string[] = []
       const src = this.isLoading ? this.normalisedSrc.lazySrc : this.currentSrc

diff --git a/packages/vuetify/src/components/VImg/__tests__/VImg.spec.ts b/packages/vuetify/src/components/VImg/__tests__/VImg.spec.ts
@@ -15,6 +15,10 @@ describe('VImg.ts', () => {
     mountFunction = (options = {}) => {
       return mount(VImg, {
         ...options,
+        propsData: {
+          eager: true,
+          ...options.propsData,
+        },
       })
     }
   })
@@ -91,7 +95,6 @@ describe('VImg.ts', () => {
   it('should emit errors', () => {
     const wrapper = mountFunction({
       propsData: {
-        eager: true,
         src: LOAD_FAILURE_SRC,
       },
     })

diff --git a/packages/vuetify/src/components/VImg/__tests__/__snapshots__/VImg.spec.ts.snap b/packages/vuetify/src/components/VImg/__tests__/__snapshots__/VImg.spec.ts.snap
@@ -20,18 +20,19 @@ exports[`VImg.ts should display placeholders 1`] = `
 
 exports[`VImg.ts should display placeholders 2`] = `
 <div class="v-image v-responsive theme--light">
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
-       style="background-image: url(lazy_src); background-position: center center;"
+  <div class="v-responsive__sizer"
+       style="padding-bottom: 56.25%;"
+  >
+  </div>
+  <div class="v-image__image v-image__image--cover"
+       style="background-image: url(full_src); background-position: center center;"
        name="fade-transition"
        mode="in-out"
   >
   </div>
-  <div class="v-image__placeholder">
-    <div>
-      loading...
-    </div>
-  </div>
-  <div class="v-responsive__content">
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
   </div>
 </div>
 `;
@@ -41,13 +42,19 @@ exports[`VImg.ts should have aria attributes 1`] = `
      role="img"
      class="v-image v-responsive theme--light"
 >
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
-       style="background-position: center center;"
+  <div class="v-responsive__sizer"
+       style="padding-bottom: 56.25%;"
+  >
+  </div>
+  <div class="v-image__image v-image__image--cover"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
        name="fade-transition"
        mode="in-out"
   >
   </div>
-  <div class="v-responsive__content">
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
   </div>
 </div>
 `;
@@ -67,13 +74,19 @@ exports[`VImg.ts should load 1`] = `
 
 exports[`VImg.ts should load 2`] = `
 <div class="v-image v-responsive theme--light">
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
-       style="background-position: center center;"
+  <div class="v-responsive__sizer"
+       style="padding-bottom: 56.25%;"
+  >
+  </div>
+  <div class="v-image__image v-image__image--cover"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
        name="fade-transition"
        mode="in-out"
   >
   </div>
-  <div class="v-responsive__content">
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
   </div>
 </div>
 `;
@@ -84,8 +97,8 @@ exports[`VImg.ts should override vuetify-loader values 1`] = `
        style="padding-bottom: 50%;"
   >
   </div>
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
-       style="background-image: url(lazySrc_manual); background-position: center center;"
+  <div class="v-image__image v-image__image--cover"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
        name="fade-transition"
        mode="in-out"
   >
@@ -97,13 +110,19 @@ exports[`VImg.ts should override vuetify-loader values 1`] = `
 
 exports[`VImg.ts should update src 1`] = `
 <div class="v-image v-responsive theme--light">
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
-       style="background-position: center center;"
+  <div class="v-responsive__sizer"
+       style="padding-bottom: 56.25%;"
+  >
+  </div>
+  <div class="v-image__image v-image__image--cover"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
        name="fade-transition"
        mode="in-out"
   >
   </div>
-  <div class="v-responsive__content">
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
   </div>
 </div>
 `;
@@ -165,13 +184,15 @@ exports[`VImg.ts should use vuetify-loader data 1`] = `
        style="padding-bottom: 100%;"
   >
   </div>
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
-       style="background-image: url(lazySrc_auto); background-position: center center;"
+  <div class="v-image__image v-image__image--cover"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
        name="fade-transition"
        mode="in-out"
   >
   </div>
-  <div class="v-responsive__content">
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
   </div>
 </div>
 `;