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/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) {