Use builtin image as fallback when authored image fails to load. (swiftlang#42)

Author: mportiz08

src/assets/img/[email protected]

@@ -9,7 +9,13 @@
 -->
 
 <template>
-  <picture>
+  <img
+    v-if="fallbackImageSrcSet"
+    class="fallback"
+    :alt="`${alt} Image failed to load.`"
+    :srcset="fallbackImageSrcSet"
+  />
+  <picture v-else>
     <!--
       if "Auto" is selected, provide an alternate dark variant if available
       using the appropriate media query
@@ -24,6 +30,7 @@
       v-if="prefersDark && darkVariantAttributes"
       v-bind="darkVariantAttributes"
       :alt="alt"
+      @error="handleImageLoadError"
     >
     <!--
       otherwise use the default variant (light preferred over dark if both available)
@@ -32,6 +39,7 @@
       v-else
       v-bind="defaultAttributes"
       :alt="alt"
+      @error="handleImageLoadError"
     >
   </picture>
 </template>
@@ -41,6 +49,7 @@
 import imageAsset from 'docc-render/mixins/imageAsset';
 import AppStore from 'docc-render/stores/AppStore';
 import ColorScheme from 'docc-render/constants/ColorScheme';
+import noImage from 'theme/assets/img/[email protected]';
 import { normalizeAssetUrl } from 'docc-render/utils/assets';
 
 function constructAttributes(sources) {
@@ -70,7 +79,10 @@ function constructAttributes(sources) {
 export default {
   name: 'ImageAsset',
   mixins: [imageAsset],
-  data: () => ({ appState: AppStore.state }),
+  data: () => ({
+    appState: AppStore.state,
+    fallbackImageSrcSet: null,
+  }),
   computed: {
     defaultAttributes: ({
       lightVariantAttributes,
@@ -92,5 +104,12 @@ export default {
       required: true,
     },
   },
+  methods: {
+    handleImageLoadError() {
+      // fall back to a default DocC-Render provided image if the specificed
+      // image fails to load for any reason
+      this.fallbackImageSrcSet = `${noImage} 2x`;
+    },
+  },
 };
 </script>

src/components/ImageAsset.vue

@@ -231,4 +231,42 @@ describe('ImageAsset', () => {
     expect(image.attributes('width')).toBe('1202');
     expect(image.attributes('height')).toBe('auto');
   });
+
+  it('renders a fallback image if the specified one does not load', () => {
+    const url = 'https://www.example.com/image.png';
+    const alt = 'This is alt text.';
+    const wrapper = shallowMount(ImageAsset, {
+      propsData: {
+        variants: [
+          {
+            traits: [
+              '2x',
+              'light',
+            ],
+            url,
+            size: {
+              width: 1202,
+              height: 630,
+            },
+          },
+        ],
+        alt,
+      },
+    });
+
+    const picture = wrapper.find('picture');
+    expect(picture.exists()).toBe(true);
+    const img = picture.find('img');
+    expect(img.exists()).toBe(true);
+    expect(img.classes('fallback')).toBe(false);
+
+    // simulate an error loading the real image
+    img.trigger('error');
+
+    expect(wrapper.find('picture').exists()).toBe(false);
+    const fallbackImg = wrapper.find('img');
+    expect(fallbackImg.exists()).toBe(true);
+    expect(fallbackImg.classes('fallback')).toBe(true);
+    expect(fallbackImg.attributes('alt')).toBe(`${alt} Image failed to load.`);
+  });
 });