[Feature] Portofolio Page Fix Image

src/components/PortofolioItem.vue

@@ -2,18 +2,16 @@
     <div class="columns is-multiline">
         <div class="column is-one-quarter" v-for="item in items">
             <div class="card">
-                <!--
                 <div class="card-image">
-                    <figure class="image is-4by3">
-                        <img :src="item.smallImage" alt="Placeholder image">
+                    <figure class="image is-square">
+                        <img :src="getPic(item.smallImage)" alt="Placeholder image">
                     </figure>
                 </div>
-                -->
                 <div class="card-content">
                     <div class="media">
                         <div class="media-left">
                             <figure class="image is-64x64">
-                                <img class="is-rounded" :src="item.icon" alt="Icon">
+                                <img class="is-rounded" :src="getPic(item.icon)" alt="Icon">
                             </figure>
                         </div>
                         <div class="media-content">
@@ -39,5 +37,9 @@ import { Component, Vue } from 'vue-property-decorator'
     items: Array,
   },
 })
-export default class PortofolioItem extends Vue {}
+export default class PortofolioItem extends Vue {
+    public getPic(url: string) : string {
+        return `${process.env.BASE_URL}${url}`
+    }
+}
 </script>

src/views/Portofolio.vue

@@ -28,56 +28,70 @@ export default class Portofolio extends Vue {
         {
             title: 'Learn Android',
             description: 'Mobile Application Example to Learn Programming in Android.',
-            smallImage: '../assets/images/portofolio/01-large.png',
-            icon: '../assets/images/portofolio/01-small.png',
+            smallImage: 'assets/portofolio/01-large.png',
+            icon: 'assets/portofolio/01-small.png',
             repository: {
                 github: 'https://github.com/bervProject/learn-android'
             }
         },
         {
             title: 'Belitung Information Center',
             description: 'Belitung Information Center using Ionic Framework.',
+            smallImage: 'assets/portofolio/02-large.png',
+            icon: 'assets/portofolio/02-small.png',
             repository: {
                 github: 'https://github.com/bervProject/belitung-information-center'
             }
         },
         {
             title: 'You Can Use It',
             description: 'You Can Use It using Starling and FeathersUI.',
+            smallImage: 'assets/portofolio/03-large.png',
+            icon: 'assets/portofolio/03-small.png',
             repository: {
                 github: 'https://github.com/bervProject/You-Can-Use-It'
             }
         },
         {
             title: 'Treasure Hunt',
-            description: 'Treasure Hunt is Android Application. This is looks like porting from iOS Application. This project want to pair with iOS Application that have name Sampoerna Events build by Suitmedia. This project build when internship in Suitmedia.'
+            description: 'Treasure Hunt is Android Application. This is looks like porting from iOS Application. This project want to pair with iOS Application that have name Sampoerna Events build by Suitmedia. This project build when internship in Suitmedia.',
+            smallImage: 'assets/portofolio/08-large.png',
+            icon: 'assets/portofolio/08-small.png'
         }
     ]
     public webData: object[] = [
         {
             title: 'Tweety',
             description: 'Tweety build on ASP.NET Framework MVC (Now Use ASP.NET Core MVC) and C#.',
+            smallImage: 'assets/portofolio/06-large.png',
+            icon: 'assets/portofolio/06-small.png',
             repository: {
                 github: 'https://github.com/berv-uni-project/tweety'
             }
         },
         {
             title: 'Scheduler OP',
             description: 'Scheduler OP build on Django Framework.',
+            smallImage: 'assets/portofolio/04-large.png',
+            icon: 'assets/portofolio/04-small.png',
             repository: {
                 github: 'https://github.com/berv-uni-project/scheduler-op'
             }
         },
         {
             title: 'Bervianto Leo Pratama Jekyll Themes',
             description: 'Themes Jekyll used Bulma for My Jekyll Themes',
+            smallImage: 'assets/480x480.png',
+            icon: 'assets/480x480.png',
             repository: {
                 github: 'https://github.com/berviantoleo/berviantoleo.github.io'
             }
         },
         {
             title: 'My Personal Site Vue.js',
             description: 'SPA Used Vue.js to created my personal website.',
+            smallImage: 'assets/480x480.png',
+            icon: 'assets/480x480.png',
             repository: {
                 github: 'https://github.com/bervProject/my-personal-web'
             }
@@ -87,13 +101,17 @@ export default class Portofolio extends Vue {
         {
             title: 'Frog Archiver',
             description: 'Frog Archiver using Qt Framework.',
+            smallImage: 'assets/portofolio/05-large.png',
+            icon: 'assets/portofolio/05-small.png',
             repository: {
                 github: 'https://github.com/berv-uni-project/Frog-Archiver'
             }
         },
         {
             title: 'Hyperdoku Solver',
             description: 'Hyperdoku Solver build on Java and Java Swing.',
+            smallImage: 'assets/portofolio/07-large.png',
+            icon: 'assets/portofolio/07-small.png',
             repository: {
                 github: 'https://github.com/berv-uni-project/Hyperdoku-Solver'
             }