Responsive image srcset fallback with src output

packages/sitecore-jss-react/src/components/Image.test.tsx

@@ -42,6 +42,35 @@ describe('<Image />', () => {
     });
   });
 
+  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(<Image {...props} />).find('img');
+
+    it('should render <img /> 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 <img /> with non-media props', () => {
+      expect(rendered.prop('id')).to.equal(props.id);
+    });
+
+    it('should render <img /> 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' } },

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';
+Image.displayName = 'Image';