fix: markdown image breaking solved

src/v2/cookbook/avoiding-memory-leaks.md

@@ -78,7 +78,7 @@ new Vue({
 
 To see this memory leak in action, open this [CodePen example](https://codepen.io/freeman-g/pen/qobpxo) using Chrome and then open the Chrome Task Manager. To open the Chrome Task Manager on Mac, choose Chrome Top Navigation > Window > Task Manager or on Windows, use the Shift+Esc shortcut. Now, click the show/hide button 50 or so times. You should see the memory usage in the Chrome Task Manager increase and never be reclaimed.
 
-![Memory Leak Example](/images/memory-leak-example.png)
+![Memory Leak Example](https://github.com/raw/vuejs/vuejs.org/master/src/images/memory-leak-example.png)
 
 ## Resolving the Memory Leak
 

src/v2/cookbook/client-side-storage.md

@@ -48,15 +48,15 @@ You can run this yourself here:
 
 Type something in the form and then reload this page. You'll note that the value you typed previously will show up automatically. Don't forget that your browser provides excellent developer tools for inspecting client-side storage. Here's an example in Firefox:
 
-![Storage devtools in Firefox](/images/devtools-storage.png)
+![Storage devtools in Firefox](https://github.com/raw/vuejs/vuejs.org/master/src/images/devtools-storage.png)
 
 And here it is in Chrome:
 
-![Storage devtools in Chrome](/images/devtools-storage-chrome.png)
+![Storage devtools in Chrome](https://github.com/raw/vuejs/vuejs.org/master/src/images/devtools-storage-chrome.png)
 
 And then finally, an example in Microsoft Edge. Note that you can find application storage values under the Debugger tab.
 
-![Storage devtools in Edge](/images/devtools-storage-edge.png)
+![Storage devtools in Edge](https://github.com/raw/vuejs/vuejs.org/master/src/images/devtools-storage-edge.png)
 
 <p class="tip">As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.</p>
 

src/v2/cookbook/debugging-in-vscode.md

@@ -45,7 +45,7 @@ module.exports = {
 
 Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome/Firefox: Launch** as the environment. Replace content of the generated launch.json with the corresponding configuration:
 
-![Add Chrome Configuration](/images/config_add.png)
+![Add Chrome Configuration](https://github.com/raw/vuejs/vuejs.org/master/src/images/config_add.png)
 
 ```json
 {
@@ -78,7 +78,7 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
 
 1.  Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
 
-  ![Breakpoint Renderer](/images/breakpoint_set.png)
+  ![Breakpoint Renderer](https://github.com/raw/vuejs/vuejs.org/master/src/images/breakpoint_set.png)
 
 2.  Open your favorite terminal at the root folder and serve the app using Vue CLI:
 
@@ -90,15 +90,15 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
 
 4.  Your breakpoint should now be hit as a new browser instance opens `http://localhost:8080`.
 
-  ![Breakpoint Hit](/images/breakpoint_hit.png)
+  ![Breakpoint Hit](https://github.com/raw/vuejs/vuejs.org/master/src/images/breakpoint_hit.png)
 
 ## Alternative Patterns
 
 ### Vue Devtools
 
 There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.
 
-![Devtools Timetravel Debugger](/images/devtools-timetravel.gif)
+![Devtools Timetravel Debugger](https://github.com/raw/vuejs/vuejs.org/master/src/images/devtools-timetravel.gif)
 
 <p class="tip">Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.</p>
 

src/v2/guide/components.md

@@ -124,7 +124,7 @@ new Vue({ el: '#components-demo3' })
 
 It's common for an app to be organized into a tree of nested components:
 
-![Component Tree](/images/components.png)
+![Component Tree](https://github.com/raw/vuejs/vuejs.org/master/src/images/components.png)
 
 For example, you might have components for a header, sidebar, and content area, each typically containing other components for navigation links, blog posts, etc.
 

src/v2/guide/index.md

@@ -283,7 +283,7 @@ var app6 = new Vue({
 
 The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
 
-![Component Tree](/images/components.png)
+![Component Tree](https://github.com/raw/vuejs/vuejs.org/master/src/images/components.png)
 
 In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:
 

src/v2/guide/instance.md

@@ -150,4 +150,4 @@ There are also other hooks which will be called at different stages of the insta
 
 Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.
 
-![The Vue Instance Lifecycle](/images/lifecycle.png)
+![The Vue Instance Lifecycle](https://github.com/raw/vuejs/vuejs.org/master/src/images/lifecycle.png)

src/v2/guide/reactivity.md

@@ -16,7 +16,7 @@ The getter/setters are invisible to the user, but under the hood they enable Vue
 
 Every component instance has a corresponding **watcher** instance, which records any properties "touched" during the component's render as dependencies. Later on when a dependency's setter is triggered, it notifies the watcher, which in turn causes the component to re-render.
 
-![Reactivity Cycle](/images/data.png)
+![Reactivity Cycle](https://github.com/raw/vuejs/vuejs.org/master/src/images/data.png)
 
 ## Change Detection Caveats
 

src/v2/guide/render-function.md

@@ -100,7 +100,7 @@ When a browser reads this code, it builds a [tree of "DOM nodes"](https://javasc
 
 The tree of DOM nodes for the HTML above looks like this:
 
-![DOM Tree Visualization](/images/dom-tree.png)
+![DOM Tree Visualization](https://github.com/raw/vuejs/vuejs.org/master/src/images/dom-tree.png)
 
 Every element is a node. Every piece of text is a node. Even comments are nodes! A node is just a piece of the page. And as in a family tree, each node can have children (i.e. each piece can contain other pieces).
 

src/v2/guide/single-file-components.md

@@ -21,7 +21,7 @@ All of these are solved by **single-file components** with a `.vue` extension, m
 
 Here's an example of a file we'll call `Hello.vue`:
 
-<a href="https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-single-file-components" target="_blank" rel="noopener noreferrer"><img src="/images/vue-component.png" alt="Single-file component example (click for code as text)" style="display: block; margin: 30px auto;"></a>
+<a href="https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-single-file-components" target="_blank" rel="noopener noreferrer"><img src="https://github.com/raw/vuejs/vuejs.org/master/src/images/vue-component.png" alt="Single-file component example (click for code as text)" style="display: block; margin: 30px auto;"></a>
 
 Now we get:
 
@@ -31,7 +31,7 @@ Now we get:
 
 As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
 
-<a href="https://gist.github.com/chrisvfritz/1c9f2daea9bc078dcb47e9a82e5f7587" target="_blank" rel="noopener noreferrer"><img src="/images/vue-component-with-preprocessors.png" alt="Single-file component example with preprocessors (click for code as text)" style="display: block; margin: 30px auto;"></a>
+<a href="https://gist.github.com/chrisvfritz/1c9f2daea9bc078dcb47e9a82e5f7587" target="_blank" rel="noopener noreferrer"><img src="https://github.com/raw/vuejs/vuejs.org/master/src/images/vue-component-with-preprocessors.png" alt="Single-file component example with preprocessors (click for code as text)" style="display: block; margin: 30px auto;"></a>
 
 These specific languages are only examples. You could as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules.
 

src/v2/guide/state-management.md

@@ -71,7 +71,7 @@ var vmB = new Vue({
 })
 ```
 
-![State Management](/images/state.png)
+![State Management](https://github.com/raw/vuejs/vuejs.org/master/src/images/state.png)
 
 <p class="tip">It's important to note that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.</p>
 

src/v2/guide/transitions.md

@@ -106,7 +106,7 @@ There are six classes applied for enter/leave transitions.
 
 6. `v-leave-to`: **Only available in versions 2.1.8+.** Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes.
 
-![Transition Diagram](/images/transition.png)
+![Transition Diagram](https://github.com/raw/vuejs/vuejs.org/master/src/images/transition.png)
 
 Each of these classes will be prefixed with the name of the transition. Here the `v-` prefix is the default when you use a `<transition>` element with no name. If you use `<transition name="my-transition">` for example, then the `v-enter` class would instead be `my-transition-enter`.