docs(aio): relocate images to match docs

aio/content/guide/animations.md

@@ -66,7 +66,7 @@ The examples in this page are available as a <live-example></live-example>.
 ## Quickstart example: Transitioning between two states
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
+  <img src="assets/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
 </figure>
 
 
@@ -172,7 +172,7 @@ controls the timing of switching between one set of styles and the next:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
+  <img src="assets/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
 </figure>
 
 
@@ -220,7 +220,7 @@ transitions that apply regardless of which state the animation is in. For exampl
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
+  <img src="assets/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
 </figure>
 
 
@@ -237,7 +237,7 @@ regardless of what state it was in before it left.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
+  <img src="assets/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
 </figure>
 
 
@@ -247,7 +247,7 @@ The wildcard state `*` also matches `void`.
 ## Example: Entering and leaving
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
+  <img src="assets/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
 </figure>
 
 
@@ -294,7 +294,7 @@ These two common animations have their own aliases:
 ## Example: Entering and leaving from different states
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
+  <img src="assets/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
 </figure>
 
 
@@ -313,7 +313,7 @@ This gives you fine-grained control over each transition:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
+  <img src="assets/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
 </figure>
 
 
@@ -346,7 +346,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
 ## Automatic property calculation
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
+  <img src="assets/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
 </figure>
 
 
@@ -405,7 +405,7 @@ and the delay (or as the *second* value when there is no delay):
 
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
+  <img src="assets/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
 </figure>
 
 
@@ -427,7 +427,7 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
 ## Multi-step animations with keyframes
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
+  <img src="assets/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
 </figure>
 
 
@@ -461,7 +461,7 @@ offsets receive offsets `0`, `0.5`, and `1`.
 ## Parallel animation groups
 
 <figure>
-  <img src="assets/images/devguide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
+  <img src="assets/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
 </figure>
 
 

aio/content/guide/aot-compiler.md

@@ -601,8 +601,8 @@ The `source-map-explorer` analyzes the source map generated with the bundle and
 showing exactly which application and Angular modules and classes are included in the bundle.
 
 Here's the map for _Tour of Heroes_.
-<a href="assets/images/cookbooks/aot-compiler/toh6-bundle.png" target="_blank" title="View larger image">
+<a href="assets/images/guide/aot-compiler/toh-pt6-bundle.png" target="_blank" title="View larger image">
   <figure class='image-display'>
-    <img src="assets/images/cookbooks/aot-compiler/toh6-bundle.png" alt="toh-pt6-bundle"></img>
+    <img src="assets/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
   </figure>
 </a>

aio/content/guide/architecture.md

@@ -27,7 +27,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
+  <img src="assets/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
 </figure>
 
 
@@ -64,7 +64,7 @@ Learn these building blocks, and you're on your way.
 ## Modules
 
 <figure>
-  <img src="assets/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -182,7 +182,7 @@ These are two different and _complementary_ module systems. Use them both to wri
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -244,7 +244,7 @@ Learn more from the [Angular modules](guide/ngmodule) page.
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -284,7 +284,7 @@ Your app can take action at each moment in this lifecycle through optional [life
 ## Templates
 
 <figure>
-  <img src="assets/images/devguide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -314,7 +314,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -330,7 +330,7 @@ Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom
 ## Metadata
 
 <figure>
-  <img src="assets/images/devguide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -379,7 +379,7 @@ so it can get the list of heroes to display.
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -406,7 +406,7 @@ into actions and value updates. Writing such push/pull logic by hand is tedious,
 read as any experienced jQuery programmer can attest.
 
 <figure>
-  <img src="assets/images/devguide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
+  <img src="assets/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
 </figure>
 
 
@@ -454,7 +454,7 @@ from the root of the application component tree through all child components.
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -463,7 +463,7 @@ Data binding plays an important role in communication
 between a template and its component.<br class="l-clear-both">
 
 <figure>
-  <img src="assets/images/devguide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -478,7 +478,7 @@ Data binding is also important for communication between parent and child compon
 ## Directives
 
 <figure>
-  <img src="assets/images/devguide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -556,7 +556,7 @@ Of course, you can also write your own directives. Components such as
 ## Services
 
 <figure>
-  <img src="assets/images/devguide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -624,7 +624,7 @@ application logic into services and make those services available to components
 ## Dependency injection
 
 <figure>
-  <img src="assets/images/devguide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -656,7 +656,7 @@ This is *dependency injection*.
 The process of `HeroService` injection looks a bit like this:
 
 <figure>
-  <img src="assets/images/devguide/architecture/injector-injects.png" alt="Service"></img>
+  <img src="assets/images/guide/architecture/injector-injects.png" alt="Service"></img>
 </figure>
 
 

aio/content/guide/attribute-directives.md

@@ -168,7 +168,7 @@ Now when the app runs, the `myHighlight` directive highlights the paragraph text
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
+  <img src="assets/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
 </figure>
 
 
@@ -280,7 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
+  <img src="assets/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
 </figure>
 
 
@@ -438,7 +438,7 @@ Here are the harness and directive in action.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
+  <img src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
 </figure>
 
 
@@ -491,7 +491,7 @@ Here's how the harness should work when you're done coding.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
+  <img src="assets/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
 </figure>
 
 

aio/content/guide/cli-quickstart.md

@@ -123,7 +123,7 @@ Your app greets you with a message:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/cli-quickstart/app-works.png' alt="The app works!"></img>
+  <img src='assets/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
 </figure>
 
 
@@ -161,7 +161,7 @@ Open `src/app/app.component.css` and give the component some style.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
+  <img src='assets/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
 </figure>
 
 

aio/content/guide/component-communication.md

@@ -54,7 +54,7 @@ The running application displays three heroes:
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
+  <img src="assets/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
 </figure>
 
 
@@ -98,7 +98,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/setter.png" alt="Parent-to-child-setter"></img>
+  <img src="assets/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
 </figure>
 
 
@@ -156,7 +156,7 @@ Here's the output of a button-pushing sequence:
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
+  <img src="assets/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
 </figure>
 
 
@@ -210,7 +210,7 @@ and the method processes it:
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
+  <img src="assets/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
 </figure>
 
 
@@ -272,7 +272,7 @@ Here we see the parent and child working together.
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
+  <img src="assets/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
 </figure>
 
 
@@ -424,7 +424,7 @@ facilitated by the service:
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
+  <img src="assets/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
 </figure>
 
 

aio/content/guide/dependency-injection-in-action.md

@@ -171,7 +171,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/logged-in-user.png" alt="Logged In User"></img>
+  <img src="assets/images/guide/dependency-injection/logged-in-user.png" alt="Logged In User"></img>
 </figure>
 
 
@@ -337,7 +337,7 @@ Find this example in <live-example name="dependency-injection-in-action">live co
 and confirm that the three `HeroBioComponent` instances have their own cached hero data.
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bios.png" alt="Bios"></img>
+  <img src="assets/images/guide/dependency-injection/hero-bios.png" alt="Bios"></img>
 </figure>
 
 
@@ -403,7 +403,7 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
 It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bio-and-content.png" alt="bio and contact"></img>
+  <img src="assets/images/guide/dependency-injection/hero-bio-and-content.png" alt="bio and contact"></img>
 </figure>
 
 
@@ -440,7 +440,7 @@ Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest o
 Here's the `HeroBiosAndContactsComponent` in action.
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
+  <img src="assets/images/guide/dependency-injection/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
 </figure>
 
 
@@ -450,7 +450,7 @@ until it finds the logger at the `AppComponent` level. The logger logic kicks in
 with the gratuitous "!!!", indicating that the logger was found.
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png" alt="Without @Host"></img>
+  <img src="assets/images/guide/dependency-injection/hero-bio-contact-no-host.png" alt="Without @Host"></img>
 </figure>
 
 
@@ -495,7 +495,7 @@ first without a value (yielding the default color) and then with an assigned col
 The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/highlight.png" alt="Highlighted bios"></img>
+  <img src="assets/images/guide/dependency-injection/highlight.png" alt="Highlighted bios"></img>
 </figure>
 
 {@a providers}
@@ -573,7 +573,7 @@ The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and
 It's visually simple: a few properties and the logs produced by a logger. 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-of-month.png" alt="Hero of the month" width="300px"></img>
+  <img src="assets/images/guide/dependency-injection/hero-of-month.png" alt="Hero of the month" width="300px"></img>
 </figure>
 
 
@@ -728,7 +728,7 @@ Now put it to use in a simplified version of the `HeroOfTheMonthComponent`.
 The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger` so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor:
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
+  <img src="assets/images/guide/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
 </figure>
 
 
@@ -743,7 +743,7 @@ Behind the scenes, Angular actually sets the `logger` parameter to the full serv
 The following image, which displays the logging date, confirms the point:
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
+  <img src="assets/images/guide/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
 </figure>
 
 
@@ -941,7 +941,7 @@ to display a *sorted* list of heroes.
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/sorted-heroes.png" alt="Sorted Heroes"></img>
+  <img src="assets/images/guide/dependency-injection/sorted-heroes.png" alt="Sorted Heroes"></img>
 </figure>
 
 
@@ -1154,7 +1154,7 @@ the same way you've done it before:
 Here's *Alex* and family in action:
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/alex.png" alt="Alex in action"></img>
+  <img src="assets/images/guide/dependency-injection/alex.png" alt="Alex in action"></img>
 </figure>
 
 
@@ -1215,7 +1215,7 @@ Here's *Alice*, *Barry* and family in action:
 
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/alice.png" alt="Alice in action"></img>
+  <img src="assets/images/guide/dependency-injection/alice.png" alt="Alice in action"></img>
 </figure>
 
 

aio/content/guide/displaying-data.md

@@ -18,7 +18,7 @@ The final UI looks like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/displaying-data/final.png" alt="Final UI"></img>
+  <img src="assets/images/guide/displaying-data/final.png" alt="Final UI"></img>
 </figure>
 
 
@@ -126,7 +126,7 @@ inside the `<my-app>` tag.
 Now run the app. It should display the title and hero name:
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
+  <img src="assets/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
 </figure>
 
 
@@ -233,7 +233,7 @@ Now the heroes appear in an unordered list.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
+  <img src="assets/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
 </figure>
 
 

aio/content/guide/dynamic-component-loader.md

@@ -214,7 +214,7 @@ Here are two sample components and the `AdComponent` interface for reference:
  The final ad banner looks like this:
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dynamic-component-loader/ads.gif" alt="Ads"></img>
+  <img src="assets/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
 </figure>
 
 

aio/content/guide/dynamic-form.md

@@ -217,7 +217,7 @@ Saving and retrieving the data is an exercise for another time.
 The final form looks like this:
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
+  <img src="assets/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
 </figure>
 
 

aio/content/guide/forms.md

@@ -60,7 +60,7 @@ You'll learn to build a template-driven form that looks like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
+  <img src="assets/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
 </figure>
 
 
@@ -74,7 +74,7 @@ If you delete the hero name, the form displays a validation error in an attentio
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
+  <img src="assets/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
 </figure>
 
 
@@ -372,7 +372,7 @@ Running the app right now would be disappointing.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
+  <img src="assets/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
 </figure>
 
 
@@ -456,7 +456,7 @@ At some point it might look like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
+  <img src="assets/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
 </figure>
 
 
@@ -529,7 +529,7 @@ If you run the app now and change every hero model property, the form might disp
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
+  <img src="assets/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
 </figure>
 
 
@@ -642,7 +642,7 @@ The actions and effects are as follows:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
+  <img src="assets/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
 </figure>
 
 
@@ -651,7 +651,7 @@ You should see the following transitions and class names:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
+  <img src="assets/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
 </figure>
 
 
@@ -671,7 +671,7 @@ on the left of the input box:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
+  <img src="assets/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
 </figure>
 
 
@@ -705,7 +705,7 @@ When the user deletes the name, the form should look like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/forms/name-required-error.png" width="400px" alt="Name required"></img>
+  <img src="assets/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
 </figure>
 
 

aio/content/guide/hierarchical-dependency-injection.md

@@ -55,7 +55,7 @@ open simultaneously.
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
+  <img src="assets/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
 </figure>
 
 
@@ -149,7 +149,7 @@ Each tax return component has the following characteristics:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
+  <img src="assets/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
 </figure>
 
 
@@ -234,7 +234,7 @@ Component (B) is the parent of another component (C) that defines its own, even
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/car-components.png" alt="car components" width="220"></img>
+  <img src="assets/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
 </figure>
 
 
@@ -247,7 +247,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
+  <img src="assets/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
 </figure>
 
 

aio/content/guide/http.md

@@ -178,7 +178,7 @@ The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRe
 It works like this:
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
+  <img src='assets/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
 </figure>
 
 
@@ -746,7 +746,7 @@ types in a text box:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
+  <img src='assets/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
 </figure>
 
 
@@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*.
 Here's how it will work after refactoring:
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
+  <img src='assets/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
 </figure>
 
 

aio/content/guide/learning-angular.md

@@ -9,7 +9,7 @@ A suggested path through the documentation for Angular newcomers.
 
 
 <figure>
-  <img src="assets/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 

aio/content/guide/lifecycle-hooks.md

@@ -9,7 +9,7 @@ Angular calls lifecycle hook methods on directives and components as it creates,
 
 
 <figure>
-  <img src="assets/images/devguide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
+  <img src="assets/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
 </figure>
 
 
@@ -465,7 +465,7 @@ The peek-a-boo exists to show how Angular calls the hooks in the expected order.
 This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button.
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
+  <img src="assets/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
 </figure>
 
 
@@ -549,7 +549,7 @@ with an entry in the *Hook Log* as seen here:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
+  <img src='assets/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
 </figure>
 
 
@@ -672,7 +672,7 @@ Here's the sample in action as the user makes changes.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
+  <img src='assets/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
 </figure>
 
 
@@ -718,7 +718,7 @@ so you can see how often `DoCheck` is called. The results are illuminating:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
+  <img src='assets/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
 </figure>
 
 
@@ -795,7 +795,7 @@ for one turn of the browser's JavaScript cycle and that's just long enough.
 Here's *AfterView* in action:
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
+  <img src='assets/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
 </figure>
 
 
@@ -859,7 +859,7 @@ It tells Angular where to insert that content.
 In this case, the projected content is the `<my-child>` from the parent.
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
+  <img src='assets/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
 </figure>
 
 

aio/content/guide/pipes.md

@@ -145,7 +145,7 @@ As you click the button, the displayed date alternates between
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
+  <img src='assets/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
 </figure>
 
 
@@ -237,7 +237,7 @@ Now you need a component to demonstrate the pipe.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/pipes/power-booster.png' alt="Power Booster"></img>
+  <img src='assets/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
 </figure>
 
 
@@ -285,7 +285,7 @@ your pipe and two-way data binding with `ngModel`.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
+  <img src='assets/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
 </figure>
 
 
@@ -372,7 +372,7 @@ code with checkbox switches and additional displays to help you experience these
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
+  <img src='assets/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
 </figure>
 
 
@@ -559,7 +559,7 @@ The component renders as the following:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/pipes/hero-list.png' alt="Hero List"></img>
+  <img src='assets/images/guide/pipes/hero-list.png' alt="Hero List"></img>
 </figure>
 
 

aio/content/guide/reactive-forms.md

@@ -353,7 +353,7 @@ Now that everything is wired up, the browser should display something like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
+  <img src="assets/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
 </figure>
 
 
@@ -457,7 +457,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
+  <img src="assets/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
 </figure>
 
 
@@ -567,7 +567,7 @@ The browser displays the following:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
+  <img src="assets/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
 </figure>
 
 
@@ -696,7 +696,7 @@ with the nested address `FormGroup`:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
+  <img src="assets/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
 </figure>
 
 
@@ -1052,7 +1052,7 @@ Together they look a bit like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
+  <img src="assets/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
 </figure>
 
 
@@ -1265,7 +1265,7 @@ Back in the browser, select the hero named "Magneta".
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
+  <img src="assets/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
 </figure>
 
 
@@ -1343,7 +1343,7 @@ After you implement both features in this section, the form will look like this:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
+  <img src="assets/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
 </figure>
 
 

aio/content/guide/router.md

@@ -533,7 +533,7 @@ and the *Heroes* view with its list of heroes.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/hero-list.png' alt="Hero List" width="250"></img>
+  <img src='assets/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
 </figure>
 
 
@@ -541,7 +541,7 @@ and the *Heroes* view with its list of heroes.
 Select one hero and the app takes you to a hero editing screen.
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
+  <img src='assets/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
 </figure>
 
 
@@ -558,7 +558,7 @@ Now click the *Crisis Center* link for a list of ongoing crises.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
+  <img src='assets/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
 </figure>
 
 
@@ -571,7 +571,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
+  <img src='assets/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
 </figure>
 
 
@@ -587,7 +587,7 @@ Up pops a dialog box.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
+  <img src='assets/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
 </figure>
 
 
@@ -609,7 +609,7 @@ Proceed to the first application milestone.
 Begin with a simple version of the app that navigates between two empty views.
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/router-1-anim.gif' alt="App in action" width="250"></img>
+  <img src='assets/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
 </figure>
 
 
@@ -765,7 +765,7 @@ and a *router outlet* where the router swaps views on and off the page. Here's w
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
+  <img src='assets/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
 </figure>
 
 
@@ -1250,7 +1250,7 @@ Here's how the user will experience this version of the app:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/router-2-anim.gif' alt="App in action"></img>
+  <img src='assets/images/guide/router/router-2-anim.gif' alt="App in action"></img>
 </figure>
 
 
@@ -1880,7 +1880,7 @@ it would be nice if the viewed hero was preselected in the list.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/selected-hero.png' alt="Selected hero"></img>
+  <img src='assets/images/guide/router/selected-hero.png' alt="Selected hero"></img>
 </figure>
 
 
@@ -2098,7 +2098,7 @@ Look for it within the repeated `<li>` tag as shown here:
 When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/selected-hero.png' alt="Selected List"></img>
+  <img src='assets/images/guide/router/selected-hero.png' alt="Selected List"></img>
 </figure>
 
 
@@ -2396,7 +2396,7 @@ If your app had many feature areas, the app component trees might look like this
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/component-tree.png' alt="Component Tree"></img>
+  <img src='assets/images/guide/router/component-tree.png' alt="Component Tree"></img>
 </figure>
 
 
@@ -2695,7 +2695,7 @@ and two buttons, "Send" and "Cancel".
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/router/contact-popup.png' alt="Contact popup" width="250"></img>
+  <img src='assets/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
 </figure>
 
 

aio/content/guide/security.md

@@ -143,7 +143,7 @@ tag but keeps safe content such as the text content of the `<script>` tag and th
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
+  <img src='assets/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
 </figure>
 
 
@@ -232,7 +232,7 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
+  <img src='assets/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
 </figure>
 
 

aio/content/guide/set-document-title.md

@@ -29,7 +29,7 @@ See the <live-example name="set-document-title"></live-example>.
     </td>
 
     <td>
-      <img src='assets/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img>      <br></br>      <img src='assets/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
+      <img src='assets/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img>      <br></br>      <img src='assets/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
     </td>
 
   </tr>
@@ -89,7 +89,7 @@ You can inject the `Title` service into the root `AppComponent` and expose a bin
 Bind that method to three anchor tags and voilà!
 
 <figure class='image-display'>
-  <img src="assets/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title"></img>
+  <img src="assets/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
 </figure>
 
 

aio/content/guide/structural-directives.md

@@ -158,7 +158,7 @@ Confirm that fact using browser developer tools to inspect the DOM.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
+  <img src='assets/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
 </figure>
 
 
@@ -186,7 +186,7 @@ While invisible, the element remains in the DOM.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
+  <img src='assets/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
 </figure>
 
 
@@ -261,7 +261,7 @@ Only the finished product ends up in the DOM.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
+  <img src='assets/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
 </figure>
 
 
@@ -498,7 +498,7 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
+  <img src='assets/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
 </figure>
 
 
@@ -564,7 +564,7 @@ The constructed paragraph renders strangely.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
+  <img src='assets/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
 </figure>
 
 
@@ -588,7 +588,7 @@ the drop down is empty.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
+  <img src='assets/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
 </figure>
 
 
@@ -613,7 +613,7 @@ It renders properly.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
+  <img src='assets/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
 </figure>
 
 
@@ -631,7 +631,7 @@ The drop down works properly.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
+  <img src='assets/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
 </figure>
 
 
@@ -788,7 +788,7 @@ When the `condition` is truthy, the top (A) paragraph is removed and the bottom
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
+  <img src='assets/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
 </figure>
 
 

aio/content/guide/template-syntax.md

@@ -1067,7 +1067,7 @@ content harmlessly.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
+  <img src='assets/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
 </figure>
 
 
@@ -1837,7 +1837,7 @@ Here are all variations in action, including the uppercase version:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
+  <img src='assets/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
 </figure>
 
 
@@ -2132,7 +2132,7 @@ Here is an illustration of the _trackBy_ effect.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
+  <img src='assets/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
 </figure>
 
 
@@ -2167,7 +2167,7 @@ Angular puts only the *selected* element into the DOM.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/switch-anim.gif' alt="trackBy"></img>
+  <img src='assets/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
 </figure>
 
 
@@ -2417,7 +2417,7 @@ The terms _input_ and _output_ reflect the perspective of the target directive.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
+  <img src='assets/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
 </figure>
 
 

aio/content/guide/testing.md

@@ -389,7 +389,7 @@ The Angular CLI has different commands to do the same thing. Adjust accordingly.
 After a few moments, karma opens a browser and starts writing to the console.
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
+  <img src='assets/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
 </figure>
 
 
@@ -473,7 +473,7 @@ Debug specs in the browser in the same way that you debug an application.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
+  <img src='assets/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
 </figure>
 
 
@@ -1914,7 +1914,7 @@ Inspect and download _all_ of the guide's application test code with this <live-
 The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
+  <img src='assets/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
 </figure>
 
 
@@ -2505,7 +2505,7 @@ A better solution is to create an artificial test component that demonstrates al
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
+  <img src='assets/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
 </figure>
 
 

aio/content/guide/upgrade.md

@@ -336,7 +336,7 @@ everything work seamlessly:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
+  <img src="assets/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
 </figure>
 
 
@@ -381,7 +381,7 @@ ways:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
+  <img src="assets/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
 </figure>
 
 
@@ -435,7 +435,7 @@ AngularJS and Angular approaches. Here's what happens:
 
 
 <figure class='image-display'>
-  <img src="assets/images/devguide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
+  <img src="assets/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
 </figure>
 
 
@@ -569,7 +569,7 @@ existing AngularJS code works as before _and_ you're ready to run Angular code.
 ### Using Angular Components from AngularJS Code
 
 <figure>
-  <img src="assets/images/devguide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -733,7 +733,7 @@ For  example, we can easily make multiple copies of the component using `ng-repe
 ### Using AngularJS Component Directives from Angular Code
 
 <figure>
-  <img src="assets/images/devguide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -936,7 +936,7 @@ and then provide the input and output using Angular template syntax:
 ### Projecting AngularJS Content into Angular Components
 
 <figure>
-  <img src="assets/images/devguide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 
@@ -983,7 +983,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
 ### Transcluding Angular Content into AngularJS Component Directives
 
 <figure>
-  <img src="assets/images/devguide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
+  <img src="assets/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
 </figure>
 
 

aio/content/guide/user-input.md

@@ -98,7 +98,7 @@ Here's what the UI displays:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/user-input/keyup1-anim.gif' alt="key up 1"></img>
+  <img src='assets/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
 </figure>
 
 
@@ -181,7 +181,7 @@ Type something in the input box, and watch the display update with each keystrok
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
+  <img src='assets/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
 </figure>
 
 
@@ -235,7 +235,7 @@ Then Angular calls the event handler only when the user presses _Enter_.
 Here's how it works.
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/user-input/keyup3-anim.gif' alt="key up 3"></img>
+  <img src='assets/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
 </figure>
 
 
@@ -269,7 +269,7 @@ clicking **Add**.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
+  <img src='assets/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
 </figure>
 
 

aio/content/tutorial/index.md

@@ -41,7 +41,7 @@ view and the most heroic heroes:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
+  <img src='assets/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
 </figure>
 
 
@@ -54,7 +54,7 @@ where you can change the hero's name.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/hero-details-1.png' alt="Details of hero in app"></img>
+  <img src='assets/images/guide/toh/hero-details-1.png' alt="Details of hero in app"></img>
 </figure>
 
 
@@ -65,7 +65,7 @@ If you click "Heroes," the app displays the "Heroes" master list view.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
+  <img src='assets/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
 </figure>
 
 
@@ -79,7 +79,7 @@ The following diagram captures all of the navigation options.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/nav-diagram.png' alt="View navigations"></img>
+  <img src='assets/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
 </figure>
 
 
@@ -88,7 +88,7 @@ Here's the app in action:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
+  <img src='assets/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
 </figure>
 
 

aio/content/tutorial/toh-pt2.md

@@ -394,7 +394,7 @@ like this:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-list-selected.png' alt="Selected hero"></img>
+  <img src='assets/images/guide/toh/heroes-list-selected.png' alt="Selected hero"></img>
 </figure>
 
 
@@ -435,7 +435,7 @@ After clicking "Magneta", the list should look like this:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
+  <img src='assets/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
 </figure>
 
 

aio/content/tutorial/toh-pt5.md

@@ -19,7 +19,7 @@ When you’re done, users will be able to navigate the app like this:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/nav-diagram.png' alt="View navigations"></img>
+  <img src='assets/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
 </figure>
 
 
@@ -967,7 +967,7 @@ After clicking a hero, users should see something like this below the hero list:
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
+  <img src='assets/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
 </figure>
 
 
@@ -1221,7 +1221,7 @@ Look at the app now. The dashboard, heroes, and navigation links are styled.
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
+  <img src='assets/images/guide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
 </figure>
 
 

aio/content/tutorial/toh-pt6.md

@@ -700,7 +700,7 @@ If you enter characters that match any existing hero names, you'll see something
 
 
 <figure class='image-display'>
-  <img src='assets/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
+  <img src='assets/images/guide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
 </figure>