diff --git a/public/docs/ts/latest/guide/ngmodule.jade b/public/docs/ts/latest/guide/ngmodule.jade
index 83a614f065..3e4428335c 100644
--- a/public/docs/ts/latest/guide/ngmodule.jade
+++ b/public/docs/ts/latest/guide/ngmodule.jade
@@ -141,7 +141,7 @@ a#bootstrap
 :marked
   The samples in this chapter demonstrate the dynamic bootstrapping approach. 
 
-  <live-example embedded plnkr="minimal.0">Try the live example.</live-example>
+  <live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
   
 
   ### Static bootstrapping with the Ahead-Of-Time (AOT) compiler
@@ -443,10 +443,10 @@ a#application-scoped-providers
 
 :marked
   Try the example:
-  <live-example embedded plnkr="contact.1b"></live-example>
+  <live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>
   
 a#resolve-conflicts
-.l-main-section
+.l-main-section 
 :marked
   ## Resolve directive conflicts
 
@@ -617,7 +617,7 @@ a#feature-modules
 
   Try this `ContactModule` version of the sample.
   
-  <live-example embedded plnkr="contact.2">Try the live example.</live-example>
+  <live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">Try the live example.</live-example>
 
 a#lazy-load
 .l-main-section
@@ -630,7 +630,8 @@ a#lazy-load
   Their specifics aren't important to the story and we won't discuss every line of code.
 .l-sub-section
   :marked
-    Examine and download the complete source for this version from the <live-example plnkr="pre-shared.3">live example.</live-example>
+    Examine and download the complete source for this version from the 
+    <live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">live example.</live-example>
 :marked
   Some facets of the current application merit discussion.
 
@@ -785,7 +786,7 @@ a#hero-module
 
   The `CrisisModule` is much the same. There's nothing more to say that's new. 
 
-  <live-example embedded plnkr="pre-shared.3">Try the live example.</live-example>
+  <live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">Try the live example.</live-example>
 
 a#shared-module
 .l-main-section
@@ -1038,7 +1039,7 @@ a#prevent-reimport
   ### Conclusion
   
   You made it! You can examine and download the complete source for this final version from the live example.
-  <live-example embedded></live-example>
+  <live-example embedded  img="devguide/ngmodule/final-plunker.png"></live-example>
 
   ### Frequently Asked Questions
 
diff --git a/public/resources/images/devguide/ngmodule/contact-1b-plunker.png b/public/resources/images/devguide/ngmodule/contact-1b-plunker.png
new file mode 100644
index 0000000000..4063efc23d
Binary files /dev/null and b/public/resources/images/devguide/ngmodule/contact-1b-plunker.png differ
diff --git a/public/resources/images/devguide/ngmodule/contact-2-plunker.png b/public/resources/images/devguide/ngmodule/contact-2-plunker.png
new file mode 100644
index 0000000000..909f928e3d
Binary files /dev/null and b/public/resources/images/devguide/ngmodule/contact-2-plunker.png differ
diff --git a/public/resources/images/devguide/ngmodule/final-plunker.png b/public/resources/images/devguide/ngmodule/final-plunker.png
new file mode 100644
index 0000000000..4669a6601b
Binary files /dev/null and b/public/resources/images/devguide/ngmodule/final-plunker.png differ
diff --git a/public/resources/images/devguide/ngmodule/minimal-plunker.png b/public/resources/images/devguide/ngmodule/minimal-plunker.png
new file mode 100644
index 0000000000..0c7bb90e98
Binary files /dev/null and b/public/resources/images/devguide/ngmodule/minimal-plunker.png differ
diff --git a/public/resources/images/devguide/ngmodule/v3-plunker.png b/public/resources/images/devguide/ngmodule/v3-plunker.png
new file mode 100644
index 0000000000..5888ebfe5a
Binary files /dev/null and b/public/resources/images/devguide/ngmodule/v3-plunker.png differ
diff --git a/public/resources/images/plunker/click-to-run.png b/public/resources/images/plunker/click-to-run.png
new file mode 100644
index 0000000000..e64c98c84f
Binary files /dev/null and b/public/resources/images/plunker/click-to-run.png differ
diff --git a/public/resources/js/directives/live-example.js b/public/resources/js/directives/live-example.js
index 712933e019..8eebff8816 100644
--- a/public/resources/js/directives/live-example.js
+++ b/public/resources/js/directives/live-example.js
@@ -32,11 +32,11 @@ angularIO.directive('liveExample', ['$location', function ($location) {
 
   function span(text) { return '<span>' + text + '</span>'; }
 
-  function embeddedTemplate(src) {
+  function embeddedTemplate(src, img) {
     return '<div ng-if="embeddedShow">' +
         '<iframe frameborder="0" width="100%" height="100%" src="' + src + '"></iframe>' +
       '</div>' +
-      '<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="/resources/images/plunker/placeholder.png" alt="plunker">';
+      '<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="' + img + '" alt="plunker">';
   }
 
   return {
@@ -48,6 +48,8 @@ angularIO.directive('liveExample', ['$location', function ($location) {
       var embedded = attrs.hasOwnProperty('embedded');
       var plnkr = embedded ? 'eplnkr' : 'plnkr';
       var href, template;
+      var imageBase  = '/resources/images/';
+      var defaultImg = 'plunker/placeholder.png';
 
       if (attrs.plnkr) {
         plnkr = attrs.plnkr + '.' + plnkr;
@@ -58,8 +60,9 @@ angularIO.directive('liveExample', ['$location', function ($location) {
       var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
 
       if (embedded && !isForDart) {
-        href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
-        template = embeddedTemplate(href);
+        href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html';
+        img = imageBase + (attrs.img || defaultImg);
+        template = embeddedTemplate(href, img);
       } else {
         var href = isForDart
           ? 'http://angular-examples.github.io/' + ex