Finish logic of View after detect result is returned.

src/components/DetectResult.vue

@@ -1,18 +1,29 @@
 <template>
-  <div class="col" :hidden="!visible">
-    <h1 class="mb-3 text-center">Detect Result</h1>
-    <img :src="imageUrl" :alt="'Disease ' + diseaseName" />
-    <p>Trustworthiness: {{ trustworthiness }}</p>
-  </div>
+  <section class="py-1 text-center container">
+    <div class="row py-lg-3">
+      <div class="col-lg-6 col-md-8 mx-auto" :hidden="!visible">
+        <h1 class="mb-3 text-center">Detect Result</h1>
+        <img
+          class="img-thumbnail my-2 w-25"
+          :src="imageUrl"
+          :alt="'Disease ' + diseaseName"
+        />
+        <h3 class="my-1">{{ diseaseName }}</h3>
+        <p class="my-1 lead text-muted">
+          Trustworthiness: {{ trustworthiness }}
+        </p>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
 export default {
   props: {
-    visible: { tyep: Boolean, default: false },
     diseaseName: { type: String },
-    trustworthiness: { type: Number },
     imageUrl: { type: String },
+    trustworthiness: { type: Number },
+    visible: { tyep: Boolean, default: false },
   },
 };
 </script>

src/components/ImageForm.vue

@@ -55,7 +55,7 @@ export default {
       };
 
       axios.post(this._uploadImgUrl(), formData, config).then((res) => {
-        console.log(res.status);
+        this.$emit("detect-responsed", res);
       });
     },
   },