feat: preview image if not pdf

src/views/Feature/FeatureAttachmentPreview.vue

 <template>
-  <div class="attachment-preview">
-    <embed src="http://localhost:8000/media/user_1/attachements/sample-1.pdf" type="application/pdf" width="100%" height="100%">
+  <div :class="['attachment-preview', { is_pdf }]">  
+    <embed
+      v-if="is_pdf"
+      :src="src"
+      type="application/pdf"
+      width="100%"
+      height="100%"
+    >
+    <img
+      v-else
+      :src="src"
+    >
   </div>
 </template>
 
@@ -11,6 +21,17 @@ export default {
   name: 'FeatureAttachmentPreview',
 
   computed: {
+    is_pdf() {
+      return this.src && this.src.includes('pdf');
+    }
+      
+  },
+
+  data() {
+    return {
+      // src: "http://localhost:8000/media/user_1/attachements/sample-1.pdf"
+      src: "http://localhost:8010/media/user_1/attachements/Miscanthus-sinensis-Little-Miss-84976-1.webp"
+    }
   },
 
   mounted() {
@@ -26,15 +47,23 @@ export default {
 .attachment-preview {
   width: 100vw;
   padding: 0;
-  @media screen and (min-width: 726px) {
-    height: calc(100vh - 70px - 1em);
-    margin: .5em auto;
-    box-shadow: 1px 2px 10px grey;
+  &.is_pdf {
+    @media screen and (min-width: 726px) {
+      height: calc(100vh - 70px - 1em);
+      margin: .5em auto;
+      box-shadow: 1px 2px 10px grey;
+    }
+    @media screen and (max-width: 725px) {
+      height: calc(100vh - 110px);
+      margin: 0 auto;
+    }
   }
-
-  @media screen and (max-width: 725px) {
-    height: calc(100vh - 110px);
-    margin: 0 auto;
+  div {
+    height: 100%;
+    width: 100%;
+  }
+  img {
+    height: 100%;
   }
 }
 </style>
\ No newline at end of file