fix: add fix for src attribute

Author: codebender828

.storybook/assets/chakra.png

@@ -15,6 +15,10 @@ module.exports = async ({ config, mode }) => {
       'sass-loader'
     ],
   });
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    "@/": path.resolve(__dirname, "./"),
+  };
 
   // Return the altered config
   return config;

.storybook/webpack.config.js

@@ -55,8 +55,12 @@ const CImage = {
   methods: {
     loadImage (src, srcset) {
       const image = new window.Image()
-      image.srcset = srcset
-      image.src = src
+      if (srcset) {
+        image.srcset = srcset
+      }
+      if (src) {
+        image.src = src
+      }
 
       image.onload = (event) => {
         this.hasLoaded = true
@@ -76,6 +80,7 @@ const CImage = {
     } else {
       imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc, srcset: this.srcset }
     }
+    debugger
     return h(CNoSsr, [
       h('img', {
         class: this.className,

packages/chakra-ui-core/src/CImage/CImage.js

@@ -8,7 +8,18 @@ storiesOf('UI | Image', module)
       <CImage
         shadow="sm"
         htmlWidth="100px"
-        src="https://bit.ly/chakra-jonathan-bakebwa"
+        src="https://bit.ly/chakra-jonathan-bakebw3a"
+        srcset="https://bit.ly/chakra-jonathan-bakebwa"
+      />
+    `
+  }))
+  .add('Webpack required image', () => ({
+    components: { CImage },
+    template: `
+      <CImage
+        shadow="sm"
+        htmlWidth="100px"
+        :src="require('@/assets/chakra.png')"
       />
     `
   }))

packages/chakra-ui-core/src/CImage/CImage.stories.js

@@ -46,9 +46,18 @@ it('fallback src works', async () => {
   })
 })
 
-it('srcset works', async () => {
-  renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_SUCCESS_SRC 400w" />' })
+it('"srcset" should work and be prioritized over "src" if provided to CImage', async () => {
+  const { asFragment } = renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_SUCCESS_SRC 400w" />' })
   await wait(() => {
     expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('srcset', 'LOAD_SUCCESS_SRC 400w')
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
+
+it('should use src if srcset provided is undefined', async () => {
+  const { asFragment } = renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_FAILURE_SRC" />' })
+  await wait(() => {
+    expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('src', 'LOAD_SUCCESS_SRC')
+    expect(asFragment()).toMatchSnapshot()
   })
 })

packages/chakra-ui-core/src/CImage/tests/CImage.test.js

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"srcset" should work and be prioritized over "src" if provided to CImage 1`] = `
+<DocumentFragment>
+  <img
+    alt="My Image Description"
+    class="css-0"
+    data-chakra-component="CImage"
+    src="LOAD_SUCCESS_SRC"
+    srcset="LOAD_SUCCESS_SRC 400w"
+  />
+</DocumentFragment>
+`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img
@@ -11,3 +23,15 @@ exports[`should render correctly 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`should use src if srcset provided is undefined 1`] = `
+<DocumentFragment>
+  <img
+    alt="My Image Description"
+    class="css-0"
+    data-chakra-component="CImage"
+    src="LOAD_SUCCESS_SRC"
+    srcset="LOAD_FAILURE_SRC"
+  />
+</DocumentFragment>
+`;

packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap

@@ -10,6 +10,8 @@
 
     <carbon-ad />
 
+    <c-image :src="require('@/assets/logo/[email protected]')" />
+
     <c-box>
       <c-box v-for="(person, _i) in contributors" :key="_i" bb="1px solid" border-color="gray.200" p="3">
         <c-text font-weight="bold" mt="3" font-size="1.3rem">

website/pages/contributors.vue

@@ -1 +1,32 @@
-// THIS FILE SHOULD NOT BE VERSION CONTROLLED
+importScripts('https://cdn.jsdelivr.net/npm/[email protected]/workbox/workbox-sw.js')
+
+// --------------------------------------------------
+// Configure
+// --------------------------------------------------
+
+// Set workbox config
+workbox.setConfig({
+  "debug": false
+})
+
+// Start controlling any existing clients as soon as it activates
+workbox.core.clientsClaim()
+
+// Skip over the SW waiting lifecycle stage
+workbox.core.skipWaiting()
+
+workbox.precaching.cleanupOutdatedCaches()
+
+// --------------------------------------------------
+// Precaches
+// --------------------------------------------------
+
+// Precache assets
+
+// --------------------------------------------------
+// Runtime Caching
+// --------------------------------------------------
+
+// Register route handlers for runtimeCaching
+workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({}), 'GET')
+workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.NetworkFirst ({}), 'GET')