Use images from shared-assets (mdn#35608)

* Use images from shared-asset

* Update files/en-us/web/css/filter-function/hue-rotate/index.md

files/en-us/web/api/canvas_api/tutorial/using_images/index.md

@@ -204,7 +204,7 @@ function draw() {
       }
     }
   };
-  img.src = "rhino.jpg";
+  img.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg";
 }
 
 draw();
@@ -236,7 +236,11 @@ In this example, we'll use the same rhino as in the previous example, but we'll
 ```html
 <canvas id="canvas" width="150" height="150"></canvas>
 <div style="display: none;">
-  <img id="source" src="rhino.jpg" width="300" height="227" />
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg"
+    width="300"
+    height="227" />
   <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
 </div>
 ```

files/en-us/web/api/canvasrenderingcontext2d/drawimage/index.md

@@ -88,7 +88,11 @@ This example draws an image to the canvas using the `drawImage()` method.
 ```html
 <canvas id="canvas"></canvas>
 <div style="display:none;">
-  <img id="source" src="rhino.jpg" width="300" height="227" />
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg"
+    width="300"
+    height="227" />
 </div>
 ```
 
@@ -141,7 +145,7 @@ const image = new Image(60, 45); // Using optional size for image
 image.onload = drawImageActualSize; // Draw when image has loaded
 
 // Load an image of intrinsic size 300x227 in CSS pixels
-image.src = "rhino.jpg";
+image.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg";
 
 function drawImageActualSize() {
   // Use the intrinsic size of image in CSS pixels for the canvas element

files/en-us/web/api/canvasrenderingcontext2d/filter/index.md

@@ -122,7 +122,9 @@ photo of a rhino.
 ```html
 <canvas id="canvas" width="400" height="150"></canvas>
 <div style="display:none;">
-  <img id="source" src="rhino.jpg" />
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg" />
 </div>
 ```
 

files/en-us/web/api/xrinputsource/index.md

@@ -38,7 +38,7 @@ If the device provides an indication of the direction in which it is pointed, th
 
 **A target ray emitted by a hand controller.**
 
-![A screenshot showing a target ray being emitted by a hand controller](example-target-ray.gif)
+![A screenshot showing a target ray being emitted by a hand controller](https://mdn.github.io/shared-assets/images/examples/hand-controller-target-ray.gif)
 
 If the device includes a trigger or other squeezable input, such as a hand gesture device that recognizes when the user squeezes their fist, that action is called a **primary squeeze action**. A primary squeeze action should correspond to a gripping act in reality, such as taking hold of an object or pressing a trigger on a tool or weapon. When a squeeze action begins, such as by the user pressing the trigger or tightening their grip, a {{domxref("XRSession.squeezestart_event", "squeezestart")}} event is sent to the `XRSession`. Once the action is completed and the user has released the trigger or the grip, a {{domxref("XRSession.squeeze_event", "squeeze")}} event is sent. This is followed by a {{domxref("XRSession.squeezeend_event", "squeezeend")}}, which is also sent if the action is aborted rather than completed.
 

files/en-us/web/api/xrinputsource/targetraymode/index.md

@@ -17,7 +17,7 @@ Typically a target ray is drawn from the source of the targeting system along th
 
 A target ray emitted by a hand controller:
 
-![A screenshot showing a target ray being emitted by a hand controller](example-target-ray.gif)
+![A screenshot showing a target ray being emitted by a hand controller](https://mdn.github.io/shared-assets/images/examples/hand-controller-target-ray.gif)
 
 The target ray can be anything from a simple line (ideally fading over distance) to an animated effect, such as the science-fiction "phaser" style shown in the screenshot above.
 

files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md

@@ -89,7 +89,9 @@ Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are r
 <!-- temporarily ignore these images. Testing preview -->
 
 ```html hidden live-sample___original
-<img src="flag.jpg?image=good" alt="220 pixel square pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg?image=good"
+  alt="220 pixel square pride flag" />
 ```
 
 {{EmbedLiveSample("original", "100", "230")}}
@@ -101,9 +103,15 @@ If replaced content is auto-sized or you provide a size for only one dimension,
 In this example, only the {{cssxref("width")}} is set on the image, so the user agent preserves its aspect ratio. The same image is repeated three times, displayed at different widths: `55px`, `110px`, and at its natural size of `220px` via the [`width: auto`](/en-US/docs/Web/CSS/width) value.
 
 ```html hidden live-sample___image
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
 ```
 
 ```css hidden live-sample___image
@@ -128,9 +136,15 @@ Only when you provide sizes for both dimensions is there a risk of distorting th
 In this example, the same image is repeated three times, explicitly sized with the same {{cssxref("height")}} value (`110px`) but different {{cssxref("width")}} values (`55px`, `110px`, and `220px`).
 
 ```html hidden live-sample___imagebad
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
 ```
 
 ```css hidden live-sample___imagebad
@@ -155,7 +169,9 @@ We have distorted the images intentionally by setting both a `height` and `width
 We could have created this same distorted effect using the CSS {{cssxref("aspect-ratio")}} property, by setting a single dimension (not both or neither) and providing a value other than `1` (or `1 / 1`). You likely don't want to do this, but it's good to know that it's possible.
 
 ```html hidden live-sample___stretch
-<img src="flag.jpg" alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
 ```
 
 ```css live-sample___stretch
@@ -180,13 +196,21 @@ To begin with, we create a container with three items, each containing one image
 ```html live-sample___imagegrid
 <div class="grid">
   <div>
-    <img src="flag.jpg" alt="Pride flag" />
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
   </div>
   <div>
-    <img class="cover" src="flag.jpg" alt="Pride flag" />
+    <img
+      class="cover"
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
   </div>
   <div>
-    <img class="contain" src="flag.jpg" alt="Pride flag" />
+    <img
+      class="contain"
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
   </div>
 </div>
 ```
@@ -538,7 +562,11 @@ div div::after {
   <div></div>
   <div></div>
   <div></div>
-  <div class="item"><img src="flag.jpg" alt="Pride flag" /></div>
+  <div class="item">
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
+  </div>
   <div></div>
   <div></div>
   <div></div>

files/en-us/web/css/css_filter_effects/using_filter_effects/index.md

@@ -143,7 +143,7 @@ p {
 ```html hidden
 <div
   class="container"
-  style="background-image: url(listen_to_black_women.jpg);">
+  style="background-image: url('https://mdn.github.io/shared-assets/images/examples/listen_to_black_women.jpg');">
   <p>
     Text on images can be illegible and inaccessible even with a drop shadow.
   </p>
@@ -272,13 +272,21 @@ The [`<filter>`](/en-US/docs/Web/SVG/Element/filter)'s {{SVGAttr("stdDeviation")
   <tbody>
     <tr>
       <td>
-        <img class="filter" src="flag.jpg" alt="Pride flag" />
+        <img
+          class="filter"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
       <td>
-        <img src="flag.jpg" alt="Pride flag" class="svgFilter" />
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag"
+          class="svgFilter" />
       </td>
       <td>
-        <img src="flag.jpg" alt="Pride flag" />
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
     </tr>
   </tbody>
@@ -290,7 +298,9 @@ The [`<filter>`](/en-US/docs/Web/SVG/Element/filter)'s {{SVGAttr("stdDeviation")
   <filter id="blur">
     <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
   </filter>
-  <image xlink:href="asset/flag.jpg" filter="url(#blur)" />
+  <image
+    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+    filter="url(#blur)" />
 </svg>
 ```
 

files/en-us/web/css/filter-function/blur/index.md

@@ -67,7 +67,10 @@ This example shows three images: the image with a `blur()` filter function appli
   <filter id="blur">
     <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
   </filter>
-  <image href="flag.jpg" xlink:href="flag.jpg" filter="url(#blur)" />
+  <image
+    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+    filter="url(#blur)" />
 </svg>
 ```
 
@@ -89,18 +92,26 @@ svg:not([height]) {
   <tbody>
     <tr>
       <td>
-        <img class="filter" src="flag.jpg" alt="Pride flag" />
+        <img
+          class="filter"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
       <td>
         <svg id="svg" height="220" width="220" style="overflow: visible">
           <filter id="svgBlur">
             <feGaussianBlur stdDeviation="3.5" />
           </filter>
-          <image href="flag.jpg" xlink:href="flag.jpg" filter="url(#svgBlur)" />
+          <image
+            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+            filter="url(#svgBlur)" />
         </svg>
       </td>
       <td>
-        <img src="flag.jpg" alt="Pride flag" />
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
     </tr>
   </tbody>

files/en-us/web/css/filter-function/brightness/index.md

@@ -174,15 +174,22 @@ In the images below, the first one has a `brightness()` filter function applied,
   </thead>
   <tbody>
     <tr>
-      <td><img class="filter" src="flag.jpg" alt="darkened pride flag" /></td>
+      <td>
+        <img
+          class="filter"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="darkened pride flag" />
+      </td>
       <td>
         <img
           style="filter: url(#darken25)"
-          src="flag.jpg"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
           alt="darkened pride flag" />
       </td>
       <td>
-        <img src="flag.jpg" alt="Pride flag" />
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
     </tr>
   </tbody>

files/en-us/web/css/filter-function/contrast/index.md

@@ -165,10 +165,16 @@ This example shows three images: the image with a `contrast()` filter function a
   <tbody>
     <tr>
       <td>
-        <img style="filter: contrast(200%)" src="flag.jpg" alt="Pride flag" />
+        <img
+          style="filter: contrast(200%)"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
       <td>
-        <img class="svgFilterLive" src="flag.jpg" alt="Pride flag" />
+        <img
+          class="svgFilterLive"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
         <svg
           xmlns="http://www.w3.org/2000/svg"
           id="svg"
@@ -187,7 +193,9 @@ This example shows three images: the image with a `contrast()` filter function a
         </svg>
       </td>
       <td>
-        <img src="flag.jpg" alt="Pride flag" />
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
       </td>
     </tr>
   </tbody>

files/en-us/web/css/filter-function/hue-rotate/index.md

@@ -72,7 +72,7 @@ p {
 ```html hidden
 <div
   class="container"
-  style="background-image: url(listen_to_black_women.jpg);">
+  style="background-image: url('https://mdn.github.io/shared-assets/images/examples/listen_to_black_women.jpg');">
   <p>
     Text on images can be illegible and inaccessible even with a drop shadow.
   </p>
@@ -147,7 +147,7 @@ This example shows three images: the image with a `hue-rotate()` filter function
       <td>
         <img
           style="filter: hue-rotate(90deg)"
-          src="flag.jpg"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
           alt="Pride flag with rotated colors" />
       </td>
       <td>
@@ -161,14 +161,18 @@ This example shows three images: the image with a `hue-rotate()` filter function
             <feColorMatrix type="hueRotate" values="90" />
           </filter>
           <image
-            xlink:href="flag.jpg"
+            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
             filter="url(#hue-rotate)"
             width="220"
             height="220" />
         </svg>
       </td>
 
-      <td><img src="flag.jpg" alt="Pride flag" /></td>
+      <td>
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
+      </td>
     </tr>
   </tbody>
 </table>