Merge pull request #3007 from mjmlio/bugfix/MJML-58-documentation_try-it-live_images

totocap · web-flow · commit d8212d9504e7 · 2025-10-30T13:36:25.000+01:00
bugfix(images): updated image URLs MJML-58
diff --git a/doc/basic.md b/doc/basic.md
@@ -6,7 +6,7 @@ In this section, you're going to learn how to code a basic email template using
 Here is the final render we want to end with:
 
 <p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live/templates/basic"><img width="350px" src="https://cloud.githubusercontent.com/assets/6558790/12779864/d9c20556-ca6a-11e5-9007-d40ac89c5088.png" alt="sexy"></a>
+  <a href="https://mjml.io/try-it-live/templates/basic"><img width="350px" src="https://static.mailjet.com/mjml-website/documentation/basic-layout-example.png" alt="sexy"></a>
 </p>
 
 <p style="text-align: center;" >
diff --git a/doc/getting_started.md b/doc/getting_started.md
@@ -3,27 +3,27 @@
 This is a responsive email
 
 <p style="text-align: center;" >
-  <img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751054/322b2c8c-c9bb-11e5-98b9-942f6ea4d585.png" alt="layout">
+  <img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-1.png" alt="layout">
 </p>
 
 Like a regular HTML template, we can split this one into different parts to fit in a grid.
 
 The body of your email, represented by the `mj-body` tag contains the entire content of your document:
 
 <p style="text-align: center;" >
-  <img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751043/1fd499c4-c9bb-11e5-828f-e0e6e18180b8.png" alt="body">
+  <img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-2.png" alt="body">
 </p>
 
 From here, you can first define your sections:
 
 <p style="text-align: center;" >
-  <img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751042/1fd191b6-c9bb-11e5-9450-cc15acec72b4.png" alt="sections">
+  <img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-3.png" alt="sections">
 </p>
 
 Inside any section, there should be columns (even if you need only one column). Columns are what makes MJML responsive.
 
 <p style="text-align: center;" >
-  <img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751041/1fd112d6-c9bb-11e5-97e7-d9c93c743c4d.png" alt="columns">
+  <img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-4.png" alt="columns">
 </p>
 
 Below, you'll find some basic rules of MJML to keep in mind for later. We'll remind them when useful but better start learning them early on.
diff --git a/doc/install.md b/doc/install.md
@@ -27,7 +27,7 @@ You can also run `yarn build:watch` to rebuild the package as you code.
 Don't want to install anything? Use the free online editor!
 
 <p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live" target="_blank"><img src="https://cloud.githubusercontent.com/assets/6558790/12195421/58a40618-b5f7-11e5-9ed3-80463874ab14.png" alt="try it live" width="75%"></a>
+  <a href="https://mjml.io/try-it-live" target="_blank"><img src="https://static.mailjet.com/mjml-website/documentation/usage-online.png" alt="try it live" width="75%"></a>
 </p>
 <br>
 
diff --git a/doc/mjml-bar-chart.md b/doc/mjml-bar-chart.md
@@ -4,11 +4,11 @@
 These bar charts are easily customizable, 100% built with HTML tables, and do not require any external dependencies.  
 **mjml-bar-chart** package is available on [GitHub](https://github.com/Freezystem/mjml-bar-chart) and [NPM](https://www.npmjs.com/package/@freezystem/mjml-bar-chart).  
 
-![Basic mjml-bar-chart rendering](https://github.com/user-attachments/assets/a65b4e1c-8780-4df0-aff6-159c332e4b7a)
+![Basic mjml-bar-chart rendering](https://static.mailjet.com/mjml-website/documentation/bar-chart-example-1.png)
 
 You can also render as stacked bars, add a link to your sources, vertically align labels, and much more:
 
-![Stacked rendering with vertically aligned legends](https://github.com/user-attachments/assets/fc34d1c8-3608-4b7f-8bf3-233cd7efe277)
+![Stacked rendering with vertically aligned legends](https://static.mailjet.com/mjml-website/documentation/bar-chart-example-2.png)
 
 
 This component is lightweight, written with TypeScript, and is thoroughly tested.  
diff --git a/doc/mjml-chart.md b/doc/mjml-chart.md
@@ -3,7 +3,7 @@
 Thanks to [image-charts](https://image-charts.com/) for their contribution with this component. It's available on [Github](https://github.com/image-charts/mjml-charts) and [NPM](https://www.npmjs.com/package/mjml-chart).
 
 <p style="text-align: center;" >
-  <img src="https://puu.sh/tjIVp/cd01defdac.png" alt="mj-chart demo" />
+  <img src="https://static.mailjet.com/mjml-website/documentation/chart-example.png" alt="mj-chart demo" />
 </p>
 
 Displays charts as images in your email.
diff --git a/doc/mjml-chartjs.md b/doc/mjml-chartjs.md
@@ -5,6 +5,6 @@ This component displays [Chart.js](https://www.chartjs.org/) charts as images in
 mj-chartjs is available on [Github](https://github.com/typpo/mjml-chartjs) and [NPM](https://www.npmjs.com/package/mjml-chartjs).  By default, it uses the open-source [QuickChart](https://quickchart.io/) API for chart rendering.
 
 <p style="text-align: center;" >
-  <img src="https://quickchart.io/chart?c=%7B%0A%20%20%20%20%20%20%20%20%20%20type%3A%20%27bar%27%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20labels%3A%20%5B%27Q1%27%2C%20%27Q2%27%2C%20%27Q3%27%2C%20%27Q4%27%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20%27Users%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%5B50%2C%2060%2C%2070%2C%20180%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%27rgb(75%2C%20192%2C%20192)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&w=500&h=300&bkg=%23ffffff&v=3&devicePixelRatio=1" alt="mj-chartjs demo" />
+  <img src="https://static.mailjet.com/mjml-website/documentation/chartjs-example.webp" alt="mj-chartjs demo" />
 </p>
 
diff --git a/doc/mjml-qr-code.md b/doc/mjml-qr-code.md
@@ -5,6 +5,6 @@ This component displays QR codes in your email.  It's available on [Github](http
 By default, mj-qr-code uses the open-source QuickChart [QR code API](https://quickchart.io/).
 
 <p style="text-align: center;" >
-  <img src="https://quickchart.io/qr?text=mjml is easy!" alt="mj-qr-code demo" />
+  <img src="https://static.mailjet.com/mjml-website/documentation/qr-code-example.webp" alt="mj-qr-code demo" />
 </p>
 
diff --git a/packages/mjml-accordion/README.md b/packages/mjml-accordion/README.md
@@ -1,7 +1,7 @@
 ## mj-accordion
 
 <p style="text-align: center;" >
-  <img src="https://i.imgur.com/C4S9MVc.gif" alt="accordion" />
+  <img src="https://static.mailjet.com/mjml-website/documentation/accordion-example.gif" alt="accordion" />
 </p>
 
 `mj-accordion` is an interactive MJML component to stack content in tabs, so the information is collapsed and only the titles are visible. Readers can interact by clicking on the tabs to reveal the content, providing a great experience on mobile devices where space is scarce.
@@ -16,7 +16,7 @@
   <mj-head>
     <mj-attributes>
       <mj-accordion border="none" padding="1px" />
-      <mj-accordion-element icon-wrapped-url="https://i.imgur.com/Xvw0vjq.png" icon-unwrapped-url="https://i.imgur.com/KKHenWa.png" icon-height="24px" icon-width="24px" />
+      <mj-accordion-element icon-wrapped-url="https://static.mailjet.com/mjml-website/documentation/accordion-arrow-down.png" icon-unwrapped-url="https://static.mailjet.com/mjml-website/documentation/accordion-arrow-up.png" icon-height="24px" icon-width="24px" />
       <mj-accordion-title font-family="Roboto, Open Sans, Helvetica, Arial, sans-serif" background-color="#fff" color="#031017" padding="15px" font-size="18px" />
       <mj-accordion-text font-family="Open Sans, Helvetica, Arial, sans-serif" background-color="#fafafa" padding="15px" color="#505050" font-size="14px" />
     </mj-attributes>
diff --git a/packages/mjml-button/README.md b/packages/mjml-button/README.md
@@ -1,7 +1,7 @@
 ## mj-button
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/6558790/12751346/fd993192-c9bc-11e5-8c91-37d616bf5874.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/button-example.png"
        alt="desktop" width="150px" />
 </p>
 
diff --git a/packages/mjml-carousel/README.md b/packages/mjml-carousel/README.md
@@ -1,7 +1,7 @@
 ## mj-carousel
 
 <p style="text-align: center;" >
-  <img src="https://i.imgur.com/wHqIzgd.gif" alt="desktop" />
+  <img src="https://static.mailjet.com/mjml-website/documentation/carousel-example.gif" alt="desktop" />
 </p>
 
 `mj-carousel` displays a gallery of images or "carousel". Readers can interact by hovering and clicking on thumbnails depending on the email client they use.
@@ -14,9 +14,9 @@ This component enables you to set the styles of the carousel elements.
     <mj-section>
       <mj-column>
         <mj-carousel>
-          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />
-          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />
-          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />
+          <mj-carousel-image src="https://static.mailjet.com/mjml-website/documentation/carousel-1.jpg" />
+          <mj-carousel-image src="https://static.mailjet.com/mjml-website/documentation/carousel-2.jpg" />
+          <mj-carousel-image src="https://static.mailjet.com/mjml-website/documentation/carousel-3.jpg" />
         </mj-carousel>
       </mj-column>
     </mj-section>
diff --git a/packages/mjml-group/README.md b/packages/mjml-group/README.md
@@ -3,13 +3,13 @@
 
 <p style="text-align: center;" >
   Desktop<br />
-  <img src="https://cloud.githubusercontent.com/assets/570317/15677458/a6ad2c1c-274a-11e6-8fdf-6853d748ef27.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/group-example-1.png"
        alt="easy and quick; responsive" />
 </p>
 
 <p style="text-align: center;" >
   Mobile<br />
-  <img src="https://cloud.githubusercontent.com/assets/570317/15677396/6bb62708-274a-11e6-8c59-0d8b3944a2ae.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/group-example-2.png"
       alt="easy and quick; responsive" />
 </p>
 
@@ -21,14 +21,14 @@ mj-group allows you to prevent columns from stacking on mobile. To do so, wrap t
     <mj-section>
       <mj-group>
         <mj-column>
-          <mj-image width="137px" height="185px" padding="0"    src="https://mjml.io/assets/img/easy-and-quick.png" />
+          <mj-image width="137px" height="185px" padding="0" src="https://static.mailjet.com/mjml-website/documentation/group-1.png" />
           <mj-text align="center">
             <h2>Easy and quick</h2>
             <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>
           </mj-text>
         </mj-column>
         <mj-column>
-          <mj-image width="166px" height="185px" padding="0" src="https://mjml.io/assets/img/responsive.png" />
+          <mj-image width="166px" height="185px" padding="0" src="https://static.mailjet.com/mjml-website/documentation/group-2.png" />
           <mj-text align="center">
             <h2>Responsive</h2>
             <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>
diff --git a/packages/mjml-hero/README.md b/packages/mjml-hero/README.md
@@ -20,7 +20,7 @@ Use `background-color` to provide a fallback color
 Fixed height
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/1830348/15354833/bfe7faaa-1cef-11e6-8d38-15e8951b6636.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/hero-example-1.png"
      alt="demo background picture with fixed height" />
 </p>
 
@@ -33,7 +33,7 @@ Fixed height
       background-width="600px"
       background-height="469px"
       background-url=
-          "https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg"
+          "https://static.mailjet.com/mjml-website/documentation/hero.jpg"
       background-color="#2a3448"
       padding="100px 0px">
       <mj-text
@@ -63,7 +63,7 @@ Fixed height
 Fluid height
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/1830348/15354867/fc2f404a-1cef-11e6-92ac-92de9e438210.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/hero-example-2.png"
       alt="demo background picture with fixed height" />
 </p>
 
@@ -75,7 +75,7 @@ Fluid height
       background-width="600px"
       background-height="469px"
       background-url=
-          "https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg"
+          "https://static.mailjet.com/mjml-website/documentation/hero.jpg"
       background-color="#2a3448"
       padding="100px 0px">
       <mj-text
diff --git a/packages/mjml-image/README.md b/packages/mjml-image/README.md
@@ -8,7 +8,7 @@ Note that if no width is provided, the image will use the parent column width.
   <mj-body>
     <mj-section>
       <mj-column>
-        <mj-image width="300px" src="https://www.online-image-editor.com//styles/2014/images/example_image.png" />
+        <mj-image width="300px" src="https://static.mailjet.com/mjml-website/documentation/image.png" />
       </mj-column>
     </mj-section>
   </mj-body>
diff --git a/packages/mjml-navbar/README.md b/packages/mjml-navbar/README.md
@@ -1,7 +1,7 @@
 ## mj-navbar
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/1830348/15317906/d6cef510-1c23-11e6-83d7-31e4e4f8ba2a.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/navbar-example.png"
       alt="example desktop width navbar" width="800px" />
 </p>
 
@@ -38,21 +38,21 @@ Individual links of the menu should be wrapped inside mj-navbar.
 Standard Desktop:
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/1830348/15317906/d6cef510-1c23-11e6-83d7-31e4e4f8ba2a.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/navbar-example.png"
       alt="example desktop width navbar" width="800px" />
 </p>
 
 Standard Mobile:
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/1830348/15317917/e514d0a4-1c23-11e6-8e5a-c23da9ac1d4e.png"
+  <img src="https://static.mailjet.com/mjml-website/documentation/navbar-mobile.png"
       alt="example mobile width navbar" width="318px" />
 </p>
 
 Mode hamburger enabled:
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/1830348/15317922/f01c5c24-1c23-11e6-9b0c-95b0602da260.gif"
+  <img src="https://static.mailjet.com/mjml-website/documentation/navbar-hamburger.gif"
       alt="hamburger mode animation shows menu expansion after clicking hamburger icon"
       width="309px" />
 </p>
diff --git a/packages/mjml-social/README.md b/packages/mjml-social/README.md
@@ -1,7 +1,7 @@
 ## mj-social
 
 <p style="text-align: center;" >
-  <img src="https://cloud.githubusercontent.com/assets/6558790/12751360/0c78ce48-c9bd-11e5-98ca-4a2ac9e6341b.png" alt="desktop" style="width: 250px;"/>
+  <img src="https://static.mailjet.com/mjml-website/documentation/social-example.png" alt="desktop" style="width: 250px;"/>
 </p>
 
 <aside class="warning">
diff --git a/packages/mjml-wrapper/README.md b/packages/mjml-wrapper/README.md
@@ -1,7 +1,7 @@
 ## mj-wrapper
 
 <p style="text-align: center;" >
-  <img src="https://i.imgur.com/6YKq83B.png" alt="wrapper" />
+  <img src="https://static.mailjet.com/mjml-website/documentation/wrapper-example.png" alt="wrapper" />
 </p>
 
 Wrapper enables to wrap multiple sections together. It's especially useful to achieve nested layouts with shared border or background images across sections.
