Make ImageItem component

src/components/ImageItem.vue

+<template>
+  <div>
+    <a :href="`/${hash}`">
+      <img :src="`/api/image/${hash}/file`" />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hash: {
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+img {
+  height: 100%;
+  width: 100%;
+}
+</style>
\ No newline at end of file

src/components/ImageList.vue

@@ -2,35 +2,28 @@
   <div>
     <section id="list-container">
       <div id="item-container" v-for="(hash, index) in hashArray" :key="index">
-        <a :href="`/${hash}`">
-          <img :src="`/api/image/${hash}/file`" />
-        </a>
-        <button @click="DeleteImage(hash)">Delete</button>
+        <ImageItem :hash="hash"></ImageItem>
       </div>
     </section>
   </div>
 </template>
 
 <script>
+import ImageItem from "@/components/ImageItem.vue";
 export default {
+  components: {
+    ImageItem,
+  },
   props: {
     hashArray: {
       required: true,
     },
   },
-  methods: {
-    DeleteImage(hash) {
-      fetch(`api/image/${hash}`, { method: "DELETE" });
-    },
-  },
+  methods: {},
 };
 </script>
 
 <style scoped>
-img {
-  height: 100%;
-  width: 100%;
-}
 #list-container {
   width: 100%;
   display: flex;
@@ -42,4 +35,7 @@ img {
   display: flex;
   flex-direction: column;
 }
+button {
+  position: absolute;
+}
 </style>
\ No newline at end of file