done: frontend - default book cover

helper function created for image path creation

frontend/src/components/BookCardComponent.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="bg-white shadow-lg rounded-lg overflow-hidden">
     <router-link :to="{
-  name: 'BookDetails', params: {
+      name: 'BookDetails', params: {
         book_code: book.book_code
       }
     }">
-    <img :src="getCoverImageUrl(book.cover_image)" alt="Book Cover" class="w-full h-48 object-cover">
-    <div class="p-4">
-      <h3 class="text-lg font-bold text-gray-800">{{ book.title }}</h3>
-      <p class="text-gray-600">{{ book.authors.map(author => author.full_name).join(', ') }}</p>
-    </div>
+      <img :src="getCoverImage(book.cover_image, API_BASE_URL)" alt="Book Cover" class="w-full h-48 object-cover">
+      <div class="p-4">
+        <h3 class="text-lg font-bold text-gray-800">{{ book.title }}</h3>
+        <p class="text-gray-600">{{ book.authors.map(author => author.full_name).join(', ') }}</p>
+      </div>
     </router-link>
   </div>
 </template>
 
 <script>
+import { getCoverImage } from '@/helpers/getCoverImage'
+
 export default {
   name: 'BookCardComponent',
   props: {
@@ -23,11 +25,13 @@ export default {
       required: true
     }
   },
-  methods: {
-    getCoverImageUrl (coverImage) {
-      const API_BASE_URL = process.env.VUE_APP_BACKEND_URL
-      return coverImage ? `${API_BASE_URL}${coverImage}` : 'https://fastly.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY' // Fallback to default image if cover_image is null
+  computed: {
+    API_BASE_URL () {
+      return process.env.VUE_APP_BACKEND_URL
     }
+  },
+  methods: {
+    getCoverImage
   }
 }
 </script>

frontend/src/helpers/getCoverImage.js

@@ -0,0 +1,5 @@
+export function getCoverImage (coverImage, baseURL) {
+  const fallbackImage = '/book/default-cover-image.jpg'
+  const imageURL = coverImage ? `${baseURL}${coverImage}` : `${fallbackImage}`
+  return imageURL
+}