Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

fix: img src attr #446

Merged
merged 11 commits into from
Jun 14, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/curvy-squids-doubt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@chakra-ui/vue': patch
---

Fixes CImage src attribute bug
10 changes: 10 additions & 0 deletions .codesandbox/ci.json
Original file line number Diff line number Diff line change
@@ -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"
}
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,5 @@ config/.env
packages/chakra-ui-nuxt/.github
packages/chakra-ui-docs/static/sw.js
website/static/sw.js
.npmrc
.npmrc
**/static/sw.js
Binary file added .storybook/assets/chakra.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 6 additions & 2 deletions packages/chakra-ui-core/src/CImage/CImage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 12 additions & 1 deletion packages/chakra-ui-core/src/CImage/CImage.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
/>
`
}))
Expand Down
13 changes: 11 additions & 2 deletions packages/chakra-ui-core/src/CImage/tests/CImage.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
`;
1 change: 0 additions & 1 deletion website/static/sw.js

This file was deleted.