diff --git a/public/images/avatars/1.jpg b/public/images/avatars/1.jpg
deleted file mode 100644
index 0b087037..00000000
Binary files a/public/images/avatars/1.jpg and /dev/null differ
diff --git a/public/images/avatars/2.jpg b/public/images/avatars/2.jpg
deleted file mode 100644
index e7367094..00000000
Binary files a/public/images/avatars/2.jpg and /dev/null differ
diff --git a/public/images/avatars/3.jpg b/public/images/avatars/3.jpg
deleted file mode 100644
index caf9a7e7..00000000
Binary files a/public/images/avatars/3.jpg and /dev/null differ
diff --git a/public/images/avatars/4.jpg b/public/images/avatars/4.jpg
deleted file mode 100644
index 97f67696..00000000
Binary files a/public/images/avatars/4.jpg and /dev/null differ
diff --git a/public/images/avatars/5.jpg b/public/images/avatars/5.jpg
deleted file mode 100644
index 82b025fe..00000000
Binary files a/public/images/avatars/5.jpg and /dev/null differ
diff --git a/public/images/avatars/6.jpg b/public/images/avatars/6.jpg
deleted file mode 100644
index 1d2b8843..00000000
Binary files a/public/images/avatars/6.jpg and /dev/null differ
diff --git a/public/images/avatars/7.jpg b/public/images/avatars/7.jpg
deleted file mode 100644
index 2903cd2f..00000000
Binary files a/public/images/avatars/7.jpg and /dev/null differ
diff --git a/public/images/avatars/8.jpg b/public/images/avatars/8.jpg
deleted file mode 100644
index 3a5eba9e..00000000
Binary files a/public/images/avatars/8.jpg and /dev/null differ
diff --git a/public/images/brand/coreui-signet.svg b/public/images/brand/coreui-signet.svg
deleted file mode 100644
index 9a4b2c5f..00000000
--- a/public/images/brand/coreui-signet.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="102px" height="116px" viewBox="0 0 102 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Untitled 3</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="coreui-signet" fill="#3C4B64" fill-rule="nonzero">
-            <path d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z" id="Shape"></path>
-            <path d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z" id="Path"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/angular.jpg b/src/assets/images/angular.jpg
similarity index 100%
rename from public/images/angular.jpg
rename to src/assets/images/angular.jpg
diff --git a/public/images/react.jpg b/src/assets/images/react.jpg
similarity index 100%
rename from public/images/react.jpg
rename to src/assets/images/react.jpg
diff --git a/public/images/vue.jpg b/src/assets/images/vue.jpg
similarity index 100%
rename from public/images/vue.jpg
rename to src/assets/images/vue.jpg
diff --git a/public/images/vue400.jpg b/src/assets/images/vue400.jpg
similarity index 100%
rename from public/images/vue400.jpg
rename to src/assets/images/vue400.jpg
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 8e7bb6cc..d6411627 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -57,8 +57,8 @@
 import { onMounted, ref, watch } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-import router from '../router'
-import { logo } from './../assets/brand/logo'
+import router from '@/router'
+import { logo } from '@/assets/brand/logo'
 export default {
   name: 'AppHeader',
   components: {
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index 6f5bd209..857bcefa 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import avatar from './../assets/images/avatars/8.jpg'
+import avatar from '@/assets/images/avatars/8.jpg'
 export default {
   name: 'AppHeaderDropdownAccnt',
   setup() {
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 503f25da..01139645 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -36,8 +36,8 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { AppSidebarNav } from './AppSidebarNav'
-import { logoNegative } from './../assets/brand/logo-negative'
-import { sygnet } from './../assets/brand/sygnet'
+import { logoNegative } from '@/assets/brand/logo-negative'
+import { sygnet } from '@/assets/brand/sygnet'
 export default {
   name: 'AppSidebar',
   components: {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 628a8043..35b20f54 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -388,12 +388,12 @@
 </template>
 
 <script>
-import avatar1 from './../assets/images/avatars/1.jpg'
-import avatar2 from './../assets/images/avatars/2.jpg'
-import avatar3 from './../assets/images/avatars/3.jpg'
-import avatar4 from './../assets/images/avatars/4.jpg'
-import avatar5 from './../assets/images/avatars/5.jpg'
-import avatar6 from './../assets/images/avatars/6.jpg'
+import avatar1 from '@/assets/images/avatars/1.jpg'
+import avatar2 from '@/assets/images/avatars/2.jpg'
+import avatar3 from '@/assets/images/avatars/3.jpg'
+import avatar4 from '@/assets/images/avatars/4.jpg'
+import avatar5 from '@/assets/images/avatars/5.jpg'
+import avatar6 from '@/assets/images/avatars/6.jpg'
 import MainChartExample from './charts/MainChartExample'
 import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
 import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 751359af..6d454925 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -28,24 +28,7 @@
           </p>
           <DocsExample href="components/card">
             <CCard style="width: 18rem">
-              <CCardImage
-                component="svg"
-                orientation="top"
-                class="docs-placeholder-img"
-                width="100%"
-                height="180"
-                xmlns="http://www.w3.org/2000/svg"
-                role="img"
-                aria-label="Placeholder: Image cap"
-                preserveAspectRatio="xMidYMid slice"
-                focusable="false"
-              >
-                <title>Placeholder</title>
-                <rect width="100%" height="100%" fill="#868e96"></rect>
-                <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                  Image cap
-                </text>
-              </CCardImage>
+              <CCardImage orientation="top" :src="VueImg" />
               <CCardBody>
                 <CCardTitle>Card title</CCardTitle>
                 <CCardText>
@@ -127,24 +110,7 @@
           </p>
           <DocsExample href="components/card/#images">
             <CCard style="width: 18rem">
-              <CCardImage
-                component="svg"
-                orientation="top"
-                class="docs-placeholder-img"
-                width="100%"
-                height="180"
-                xmlns="http://www.w3.org/2000/svg"
-                role="img"
-                aria-label="Placeholder: Image cap"
-                preserveAspectRatio="xMidYMid slice"
-                focusable="false"
-              >
-                <title>Placeholder</title>
-                <rect width="100%" height="100%" fill="#868e96"></rect>
-                <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                  Image cap
-                </text>
-              </CCardImage>
+              <CCardImage orientation="top" :src="VueImg" />
               <CCardBody>
                 <CCardText>
                   Some quick example text to build on the card title and make up
@@ -214,24 +180,7 @@
           </p>
           <DocsExample href="components/card/#kitchen-sink">
             <CCard style="width: 18rem">
-              <CCardImage
-                component="svg"
-                orientation="top"
-                class="docs-placeholder-img"
-                width="100%"
-                height="180"
-                xmlns="http://www.w3.org/2000/svg"
-                role="img"
-                aria-label="Placeholder: Image cap"
-                preserveAspectRatio="xMidYMid slice"
-                focusable="false"
-              >
-                <title>Placeholder</title>
-                <rect width="100%" height="100%" fill="#868e96"></rect>
-                <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                  Image cap
-                </text>
-              </CCardImage>
+              <CCardImage orientation="top" :src="VueImg" />
               <CCardBody>
                 <CCardTitle>Card title</CCardTitle>
                 <CCardText>
@@ -544,24 +493,7 @@
             <CRow>
               <CCol :lg="6">
                 <CCard class="mb-3">
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -592,24 +524,7 @@
                       >
                     </CCardText>
                   </CCardBody>
-                  <CCardImage
-                    component="svg"
-                    orientation="bottom"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="bottom" :src="VueImg" />
                 </CCard>
               </CCol>
             </CRow>
@@ -633,28 +548,42 @@
           </p>
           <DocsExample href="components/card/#background-and-color">
             <CRow>
-              {[ { color: 'primary', textColor: 'white' }, { color: 'secondary',
-              textColor: 'white' }, { color: 'success', textColor: 'white' }, {
-              color: 'danger', textColor: 'white' }, { color: 'warning' }, {
-              color: 'info', textColor: 'white' }, { color: 'light' }, { color:
-              'dark', textColor: 'white' }, ].map((item, index) => (
-              <CCol :lg="4" key="{index}">
-                <CCard
-                  color="{item.color}"
-                  textColor="{item.textColor}"
-                  class="mb-3"
-                >
-                  <CCardHeader>Header</CCardHeader>
-                  <CCardBody>
-                    <CCardTitle>{item.color} card title</CCardTitle>
-                    <CCardText>
-                      Some quick example text to build on the card title and
-                      make up the bulk of the card&#39;s content.
-                    </CCardText>
-                  </CCardBody>
-                </CCard>
-              </CCol>
-              ))}
+              <template
+                v-for="item in [
+                  { color: 'primary', textColor: 'white' },
+                  { color: 'secondary', textColor: 'white' },
+                  { color: 'success', textColor: 'white' },
+                  {
+                    color: 'danger',
+                    textColor: 'white',
+                  },
+                  { color: 'warning' },
+                  {
+                    color: 'info',
+                    textColor: 'white',
+                  },
+                  { color: 'light' },
+                  { color: 'dark', textColor: 'white' },
+                ]"
+                :key="item"
+              >
+                <CCol :lg="4">
+                  <CCard
+                    class="mb-3"
+                    :color="item.color"
+                    :textColor="item.textColor"
+                  >
+                    <CCardHeader>Header</CCardHeader>
+                    <CCardBody>
+                      <CCardTitle>{{ item.color }} card title</CCardTitle>
+                      <CCardText>
+                        Some quick example text to build on the card title and
+                        make up the bulk of the card&#39;s content.
+                      </CCardText>
+                    </CCardBody>
+                  </CCard>
+                </CCol>
+              </template>
             </CRow>
           </DocsExample>
           <h3>Border</h3>
@@ -680,6 +609,7 @@
                 { color: 'light' },
                 { color: 'dark' },
               ]"
+              :key="item"
             >
               <CCard
                 :textColor="item.textColor"
@@ -758,24 +688,7 @@
           <DocsExample href="components/card/#card-groups">
             <CCardGroup>
               <CCard>
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  class="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
+                <CCardImage orientation="top" :src="VueImg" />
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -791,24 +704,7 @@
                 </CCardBody>
               </CCard>
               <CCard>
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  class="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
+                <CCardImage orientation="top" :src="VueImg" />
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -823,24 +719,7 @@
                 </CCardBody>
               </CCard>
               <CCard>
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  class="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
+                <CCardImage orientation="top" :src="VueImg" />
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -864,24 +743,7 @@
           <DocsExample href="components/card/#card-groups">
             <CCardGroup>
               <CCard>
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  class="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
+                <CCardImage orientation="top" :src="VueImg" />
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -897,24 +759,7 @@
                 </CCardFooter>
               </CCard>
               <CCard>
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  class="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
+                <CCardImage orientation="top" :src="VueImg" />
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -929,24 +774,7 @@
                 </CCardFooter>
               </CCard>
               <CCard>
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  class="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
+                <CCardImage orientation="top" :src="VueImg" />
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -975,38 +803,21 @@
           <p class="text-medium-emphasis small">
             Use the <code>CRow</code> component and set
             <code
-              >&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: *
-              &#125;&#125;</code
+              >&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: *
+              &#125;"</code
             >
             property to control how many grid columns (wrapped around your
             cards) you show per row. For example, here&#39;s
-            <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the cards
+            <code>xs="&#123;cols: 1&#125;"</code> laying out the cards
             on one column, and
-            <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four cards
+            <code>md="&#123;cols: 1&#125;"</code> splitting four cards
             to equal width across multiple rows, from the medium breakpoint up.
           </p>
           <DocsExample href="components/card/#grid-cards">
             <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1024,24 +835,7 @@
               </CCol>
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1059,24 +853,7 @@
               </CCol>
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1094,24 +871,7 @@
               </CCol>
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1130,31 +890,14 @@
             </CRow>
           </DocsExample>
           <p class="text-medium-emphasis small">
-            Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and
+            Change it to <code>md="&#123; cols: 3&#125;"</code> and
             you&#39;ll see the fourth card wrap.
           </p>
           <DocsExample href="components/card/#grid-cards">
             <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1172,24 +915,7 @@
               </CCol>
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1207,24 +933,7 @@
               </CCol>
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1242,24 +951,7 @@
               </CCol>
               <CCol xs>
                 <CCard>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
-                    class="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
+                  <CCardImage orientation="top" :src="VueImg" />
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -1284,7 +976,13 @@
 </template>
 
 <script>
+import VueImg from '@/assets/images/vue.jpg'
 export default {
   name: 'Cards',
+  setup() {
+    return {
+      VueImg,
+    }
+  },
 }
 </script>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 544b1046..a84e6c35 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -17,21 +17,21 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/vue.jpg"
+                  :src="VueImg"
                   alt="slide 1"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/react.jpg"
+                  :src="ReactImg"
                   alt="slide 2"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/angular.jpg"
+                  :src="AngularImg"
                   alt="slide 3"
                 />
               </CCarouselItem>
@@ -53,21 +53,21 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/vue.jpg"
+                  :src="VueImg"
                   alt="slide 1"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/react.jpg"
+                  :src="ReactImg"
                   alt="slide 2"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/angular.jpg"
+                  :src="AngularImg"
                   alt="slide 3"
                 />
               </CCarouselItem>
@@ -89,21 +89,21 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/vue.jpg"
+                  :src="VueImg"
                   alt="slide 1"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/react.jpg"
+                  :src="ReactImg"
                   alt="slide 2"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/angular.jpg"
+                  :src="AngularImg"
                   alt="slide 3"
                 />
               </CCarouselItem>
@@ -131,7 +131,7 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/vue.jpg"
+                  :src="VueImg"
                   alt="slide 1"
                 />
                 <CCarouselCaption class="d-none d-md-block">
@@ -144,7 +144,7 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/react.jpg"
+                  :src="ReactImg"
                   alt="slide 2"
                 />
                 <CCarouselCaption class="d-none d-md-block">
@@ -157,7 +157,7 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/angular.jpg"
+                  :src="AngularImg"
                   alt="slide 3"
                 />
                 <CCarouselCaption class="d-none d-md-block">
@@ -185,21 +185,21 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/vue.jpg"
+                  :src="VueImg"
                   alt="slide 1"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/react.jpg"
+                  :src="ReactImg"
                   alt="slide 2"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/angular.jpg"
+                  :src="AngularImg"
                   alt="slide 3"
                 />
               </CCarouselItem>
@@ -225,21 +225,21 @@
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/vue.jpg"
+                  :src="VueImg"
                   alt="slide 1"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/react.jpg"
+                  :src="ReactImg"
                   alt="slide 2"
                 />
               </CCarouselItem>
               <CCarouselItem>
                 <img
                   class="d-block w-100"
-                  src="/images/angular.jpg"
+                  :src="AngularImg"
                   alt="slide 3"
                 />
               </CCarouselItem>
@@ -252,7 +252,17 @@
 </template>
 
 <script>
+import AngularImg from '@/assets/images/angular.jpg'
+import ReactImg from '@/assets/images/react.jpg'
+import VueImg from '@/assets/images/vue.jpg'
 export default {
   name: 'Carousels',
+  setup() {
+    return {
+      AngularImg,
+      ReactImg,
+      VueImg,
+    }
+  }
 }
 </script>