docs: ✏️ Refactor all img src with absolute URL's (#9174)

docs: ✏️ Refactor all img src with absolute URL's

README.md

@@ -46,7 +46,7 @@ Storybook is a development environment for UI components.
 It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
 
 <center>
- <img src="media/storybook-intro.gif" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/media/storybook-intro.gif" width="100%" />
 </center>
 
 <p align="center">
@@ -91,7 +91,7 @@ If you'd rather set up your project manually, take a look at our [Slow Start Gui
 
 Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
 
-**Storybook v2.x migration note**: 
+**Storybook v2.x migration note**:
 If you're using Storybook v2.x and want to shift to 4.x version the easiest way is:
 
 ```sh

addons/docs/docs/docspage.md

@@ -1,18 +1,28 @@
 <center>
- <img src="./media/docspage-hero.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docspage-hero.png" width="100%" />
 </center>
 
 # Storybook DocsPage
 
 When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component.
 
-- [Motivation](#motivation)
-- [Component parameter](#component-parameter)
-- [Subcomponents parameter](#subcomponents-parameter)
-- [DocsPage slots](#docspage-slots)
-- [Replacing DocsPage](#replacing-docspage)
-- [Story file names](#story-file-names)
-- [More resources](#more-resources)
+- [Storybook DocsPage](#storybook-docspage)
+ - [Motivation](#motivation)
+ - [Component parameter](#component-parameter)
+ - [Subcomponents parameter](#subcomponents-parameter)
+ - [DocsPage slots](#docspage-slots)
+ - [Slot values](#slot-values)
+ - [Title](#title)
+ - [Subtitle](#subtitle)
+ - [Description](#description)
+ - [Primary](#primary)
+ - [Props](#props)
+ - [Stories](#stories)
+ - [Slot functions](#slot-functions)
+ - [Replacing DocsPage](#replacing-docspage)
+ - [Story file names](#story-file-names)
+ - [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
+ - [More resources](#more-resources)
 
 ## Motivation
 
@@ -80,7 +90,7 @@ If you want organize your documentation differently for groups of components, we
 `DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
 
 <center>
- <img style="padding: 30px; border: 3px solid #eee;" src="./media/docspage-slots.png" width="100%" />
+ <img style="padding: 30px; border: 3px solid #eee;" src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docspage-slots.png" width="100%" />
 </center>
 
 ## Slot values

addons/docs/docs/faq.md

@@ -19,7 +19,7 @@ Currently we hide the addons panel when docs is visible. It's tricky because all
 ## How do I debug my MDX story?
 
 <center>
- <img src="./media/faq-debug.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/faq-debug.png" width="100%" />
 </center>
 
 > "My story renders in docs, but doesn’t show up the way I’d expect in the Canvas”
@@ -37,7 +37,7 @@ For example, the following MDX story:
 Shows up in the dev tools as follows:
 
 <center>
- <img src="./media/faq-devtools.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/faq-devtools.png" width="100%" />
 </center>
 
 This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.

addons/docs/docs/mdx.md

@@ -1,5 +1,5 @@
 <center>
- <img src="./media/mdx-hero.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-hero.png" width="100%" />
 </center>
 
 # Storybook Docs MDX
@@ -8,14 +8,15 @@
 
 `MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.
 
-- [Basic example](#basic-example)
-- [MDX-Flavored CSF](#mdx-flavored-csf)
-- [Writing stories](#writing-stories)
-- [Embedding stories](#embedding-stories)
-- [Decorators and parameters](#decorators-and-parameters)
-- [Documentation-only MDX](#documentation-only-mdx)
-- [MDX file names](#mdx-file-names)
-- [More resources](#more-resources)
+- [Storybook Docs MDX](#storybook-docs-mdx)
+ - [Basic example](#basic-example)
+ - [MDX-Flavored CSF](#mdx-flavored-csf)
+ - [Writing stories](#writing-stories)
+ - [Embedding stories](#embedding-stories)
+ - [Decorators and parameters](#decorators-and-parameters)
+ - [Documentation-only MDX](#documentation-only-mdx)
+ - [MDX file names](#mdx-file-names)
+ - [More resources](#more-resources)
 
 ## Basic example
 
@@ -46,7 +47,7 @@ markdown documentation.
 And here's how that's rendered in Storybook:
 
 <center>
- <img src="./media/mdx-simple.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>
 
 As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
@@ -130,7 +131,7 @@ with unique URLs and isolated snapshot tests.
 And here's how that gets rendered in Storybook:
 
 <center>
- <img src="./media/mdx-page.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-page.png" width="100%" />
 </center>
 
 ## Embedding stories
@@ -185,7 +186,7 @@ If you don't define a `Meta`, you can write Markdown and associate with an exist
 To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
 
 <center>
- <img src="./media/mdx-documentation-only.png" width="100%" />
+ <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-documentation-only.png" width="100%" />
 </center>
 
 ## MDX file names

addons/ondevice-backgrounds/README.md

@@ -2,7 +2,7 @@
 
 Storybook Backgrounds Addon for react-native can be used to change background colors of your stories right from the device.
 
-<img src="docs/demo.gif" alt="Storybook Backgrounds Addon Demo" width="400" />
+<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/ondevice-backgrounds/docs/demo.gif" alt="Storybook Backgrounds Addon Demo" width="400" />
 
 ## Installation