From 72d84414a138504935b4c17d3c3013eb4d6fca8b Mon Sep 17 00:00:00 2001 From: "manuel.lieb" Date: Mon, 16 Mar 2020 13:00:22 +0100 Subject: [PATCH 1/2] always output src attr for Image --- packages/sitecore-jss-react/src/components/Image.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index c8bfb64f8a..b6c0c530c3 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -97,9 +97,9 @@ const getImageAttrs = ( if (srcSet) { // replace with HTML-formatted srcset, including updated image URLs newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams); - } else { - newAttrs.src = resolvedSrc; } + // always output original src as fallback for older browsers + newAttrs.src = resolvedSrc; return newAttrs; }; @@ -176,4 +176,4 @@ Image.defaultProps = { editable: true, }; -Image.displayName = 'Image'; \ No newline at end of file +Image.displayName = 'Image'; From 5ef24b69d292d86d5d1dade4d0e7d655b67dc4ce Mon Sep 17 00:00:00 2001 From: "manuel.lieb" Date: Mon, 16 Mar 2020 13:00:51 +0100 Subject: [PATCH 2/2] update Image test for responsive image object --- .../src/components/Image.test.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/sitecore-jss-react/src/components/Image.test.tsx b/packages/sitecore-jss-react/src/components/Image.test.tsx index 893310ca14..7ad7d4caa1 100644 --- a/packages/sitecore-jss-react/src/components/Image.test.tsx +++ b/packages/sitecore-jss-react/src/components/Image.test.tsx @@ -42,6 +42,35 @@ describe('', () => { }); }); + describe('with responsive image object', () => { + const props = { + media: { + src: '/assets/img/test0.png', + }, + srcSet: [{ mw: 100 }, { mw: 300 }], + sizes: '(min-width: 960px) 300px, 100px', + id: 'some-id', + className: 'the-dude-abides', + }; + + const rendered = mount().find('img'); + + it('should render with needed img tags', () => { + expect(rendered).to.have.length(1); + expect(rendered.prop('src')).to.equal(props.media.src); + expect(rendered.prop('srcSet')).to.equal('/assets/img/test0.png?mw=100 100w, /assets/img/test0.png?mw=300 300w'); + expect(rendered.prop('sizes')).to.equal('(min-width: 960px) 300px, 100px'); + }); + + it('should render with non-media props', () => { + expect(rendered.prop('id')).to.equal(props.id); + }); + + it('should render with style and className props', () => { + expect(rendered.prop('className')).to.eql(props.className); + }); + }); + describe('with "value" property value', () => { const props = { media: { value: { src: '/assets/img/test0.png', alt: 'my image' } },