diff --git a/.changeset/curvy-squids-doubt.md b/.changeset/curvy-squids-doubt.md
new file mode 100644
index 00000000..b67b5956
--- /dev/null
+++ b/.changeset/curvy-squids-doubt.md
@@ -0,0 +1,5 @@
+---
+'@chakra-ui/vue': patch
+---
+
+Fixes CImage src attribute bug
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
new file mode 100644
index 00000000..451f3b84
--- /dev/null
+++ b/.codesandbox/ci.json
@@ -0,0 +1,10 @@
+{
+ "installCommand": "csb:install",
+ "buildCommand": "build",
+ "packages": [
+ "packages/chakra-ui-core",
+ "packages/chakra-ui-nuxt"
+ ],
+ "sandboxes": ["chakra-ui-vue-0x-starter-template-2sy0g", "chakra-ui-nuxt-demo-f8tq4"],
+ "node": "14"
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index d3d92c38..d4c8b810 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,4 +37,5 @@ config/.env
packages/chakra-ui-nuxt/.github
packages/chakra-ui-docs/static/sw.js
website/static/sw.js
-.npmrc
\ No newline at end of file
+.npmrc
+**/static/sw.js
\ No newline at end of file
diff --git a/.storybook/assets/chakra.png b/.storybook/assets/chakra.png
new file mode 100644
index 00000000..35d385d6
Binary files /dev/null and b/.storybook/assets/chakra.png differ
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 26857e3f..ad23fb99 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -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;
diff --git a/package.json b/package.json
index 4e839c8b..5ef7dd33 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
},
"scripts": {
"postinstall": "lerna link",
+ "csb:install": "yarn && yarn bootstrap",
"bootstrap": "lerna bootstrap --use-workspaces",
"build:dev": "yarn workspace @chakra-ui/vue run rollup --config rollup.dev.config.js",
"build": "yarn workspace @chakra-ui/vue build",
diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
index a93cc3f9..a7746822 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.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
diff --git a/packages/chakra-ui-core/src/CImage/CImage.stories.js b/packages/chakra-ui-core/src/CImage/CImage.stories.js
index d4130a74..4ac8ec86 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.stories.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.stories.js
@@ -8,7 +8,18 @@ storiesOf('UI | Image', module)
+ `
+ }))
+ .add('Webpack required image', () => ({
+ components: { CImage },
+ template: `
+
`
}))
diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
index 04836872..e2aaa61e 100644
--- a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
+++ b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
@@ -46,9 +46,18 @@ it('fallback src works', async () => {
})
})
-it('srcset works', async () => {
- renderComponent({ template: '' })
+it('"srcset" should work and be prioritized over "src" if provided to CImage', async () => {
+ const { asFragment } = renderComponent({ template: '' })
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: '' })
+ await wait(() => {
+ expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('src', 'LOAD_SUCCESS_SRC')
+ expect(asFragment()).toMatchSnapshot()
})
})
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
index 0b179b32..f3887799 100644
--- a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
+++ b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -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`] = `
+
+
+
+`;
+
exports[`should render correctly 1`] = `
`;
+
+exports[`should use src if srcset provided is undefined 1`] = `
+
+
+
+`;
diff --git a/website/static/sw.js b/website/static/sw.js
deleted file mode 100644
index ea698990..00000000
--- a/website/static/sw.js
+++ /dev/null
@@ -1 +0,0 @@
-// THIS FILE SHOULD NOT BE VERSION CONTROLLED