Merge pull request #423 from MWFIAE/patch-1

feat(image): Add srcset support to CImage

Author: codebender828

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

@@ -25,6 +25,7 @@ const CImage = {
   mixins: [createStyledAttrsMixin('CImage')],
   props: {
     src: String,
+    srcset: String,
     fallbackSrc: String,
     ignoreFalback: Boolean,
     htmlWidth: String,
@@ -48,12 +49,13 @@ const CImage = {
   created () {
     // Should only invoke window.Image in the browser.
     if (process.browser) {
-      this.loadImage(this.src)
+      this.loadImage(this.src, this.srcset)
     }
   },
   methods: {
-    loadImage (src) {
+    loadImage (src, srcset) {
       const image = new window.Image()
+      image.srcset = srcset
       image.src = src
 
       image.onload = (event) => {
@@ -70,9 +72,9 @@ const CImage = {
   render (h) {
     let imageProps
     if (this.ignoreFallback) {
-      imageProps = { src: this.src }
+      imageProps = { src: this.src, srcset: this.srcset }
     } else {
-      imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc }
+      imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc, srcset: this.srcset }
     }
     return h(CNoSsr, [
       h('img', {

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

@@ -45,3 +45,10 @@ it('fallback src works', async () => {
     expect(screen.getByAltText(/Mesut Koca/i)).toHaveAttribute('src', 'LOAD_FALLBACK_SRC')
   })
 })
+
+it('srcset works', async () => {
+  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')
+  })
+})