Save images offline, in the snapshot (#770)

* Implemented image restore from rr_dataURL

* Implement saving images in the snapshot

* Fixed image saving, added a test

* Rename data-src to data-rrweb-src

* Updated the guide

* Rename recordImages to inlineImages and try catch

packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap

@@ -326,6 +326,7 @@ exports[`integration tests [html file]: picture.html 1`] = `
       <source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
       <img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
     </picture>
+    <img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" />
   </body></html>"
 `;
 

packages/rrweb-snapshot/test/html/picture.html

@@ -4,5 +4,6 @@
       <source type="image/webp" srcset="assets/img/characters/robot.webp" />
       <img src="assets/img/characters/robot.png" />
     </picture>
+    <img src="/images/robot.png" alt="This is a robot" />
   </body>
 </html>

packages/rrweb-snapshot/test/integration.test.ts

@@ -28,6 +28,7 @@ const startServer = () =>
       '.html': 'text/html',
       '.js': 'text/javascript',
       '.css': 'text/css',
+      '.png': 'image/png',
     };
     const s = http.createServer((req, res) => {
       const parsedUrl = url.parse(req.url!);
@@ -190,6 +191,25 @@ iframe.contentDocument.querySelector('center').clientHeight
       'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})',
     );
   });
+
+  it('correctly saves images offline', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    // console for debug
+    // tslint:disable-next-line: no-console
+    page.on('console', (msg) => console.log(msg.text()));
+
+    await page.goto('http://localhost:3030/html/picture.html', { waitUntil: 'load' });
+    await page.waitForSelector('img', { timeout: 1000 });
+
+    const snapshot = await page.evaluate(`${code}
+    const [snap] = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false});
+    JSON.stringify(snap, null, 2);
+    `);
+
+    assert(snapshot.includes('"rr_dataURL"'));
+    assert(snapshot.includes('data:image/png;base64,'));
+  });
+
 });
 
 describe('iframe integration tests', function (this: ISuite) {