fix(card, avatar): variants demo not loading images in live section o…

…f docs page (#1386)

fix(docs): adding placeholder images for card, full urls for other demo images

elements/rh-avatar/demo/color-context.html

@@ -9,7 +9,7 @@
              plain></rh-avatar>
   <rh-avatar name="Grace Hopper"
              subtitle="Rear Admiral"
-             src="hopper.jpg"
+             src="https://ux.redhat.com/elements/avatar/demo/hopper.jpg"
              plain></rh-avatar>
   <rh-avatar name="Haskell Curry"
              subtitle="Computer Scientist"

elements/rh-avatar/demo/plain.html

@@ -3,7 +3,7 @@
            plain></rh-avatar>
 <rh-avatar name="Grace Hopper"
            subtitle="Rear Admiral"
-           src="hopper.jpg"
+           src="https://ux.redhat.com/elements/avatar/demo/hopper.jpg"
            plain></rh-avatar>
 <rh-avatar name="Haskell Curry"
            subtitle="Computer Scientist"

elements/rh-avatar/demo/subtitles.html

@@ -1,4 +1,4 @@
-<rh-avatar src="schoenfinkel.jpg">Moses Schoenfinkle
+<rh-avatar src="https://ux.redhat.com/elements/avatar/demo/schoenfinkel.jpg">Moses Schoenfinkle
   <span slot="subtitle">
     Inventor of Combinatorics,
     often uncreditted for inventing the process of "currying" functions,

elements/rh-card/demo/color-context.html

@@ -23,7 +23,12 @@ <h2 slot="header">Slotted title, content, and footer</h2>
   </rh-card>
 
   <rh-card class="full">
-    <img slot="header" src="kitten-400x250.jpeg"></img>
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+      <title>A placeholder image in a card header slot</title>
+      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+    </svg> 
     <h2 slot="header">Card with slotted image header. Full width image.</h2>
     <p>
       lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam eleifend elit sed est egestas, a

elements/rh-card/demo/variants.html

@@ -76,10 +76,12 @@ <h2 slot="header">End aligned content, footer</h2>
 </rh-card>
 
 <rh-card class="full">
-  <img slot="header"
-       alt="a kitten's cute little face"
-       src="kitten-400x250.jpeg"
-       title="Card with slotted image header. Full width image."></img>
+  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+      <title>A placeholder image in a card header slot</title>
+      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+    </svg> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
@@ -90,10 +92,12 @@ <h2 slot="header">End aligned content, footer</h2>
 </rh-card>
 
 <rh-card class="full">
-  <img slot="header"
-       src="kitten-400x250.jpeg"
-       alt="a kitten's cute little face"
-       title="Card with slotted image header. Full width image."></img>
+  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+      <title>A placeholder image in a card header slot</title>
+      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+    </svg> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam eleifend elit sed est egestas, a sollicitudin mauris
     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
@@ -104,7 +108,12 @@ <h2 slot="header">End aligned content, footer</h2>
 </rh-card>
 
 <rh-card class="full">
-  <img slot="header" src="kitten-400x250.jpeg" alt="a kitten's cute little face"></img>
+  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+      <title>A placeholder image in a card header slot</title>
+      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+    </svg> 
   <h2 slot="header">Card with slotted image header. Full width image.</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Nullam eleifend elit sed est egestas, a sollicitudin mauris