setup

resources/js/admin/components/inputs/ImageReadOnlyInput.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="form-group">
+        <label v-if="label" for="name">{{ label }}</label>
+		<div class="upload-box">
+			<div v-if="preview" v-for="(img, $index) in preview" :key="$index">
+              	<div>
+        			<img class="img-fluid" alt='' :src="img"/>
+        		</div>
+        	</div>
+	    </div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			label: String,
+			exist_img: Array,
+		},
+		data() {
+			return {
+				preview: [],
+				img: [],
+				mime_type: '',
+			}
+		},
+		methods: {
+			loadExistingImg() {
+				let vm = this;
+				if (vm.exist_img[0]) {
+					vm.mime_type = vm.exist_img[0].mime_type;
+					Array.from(vm.exist_img).forEach(file => { 
+						vm.preview.push(file.file_info.original.file);
+					});
+				}
+			}
+		},
+		watch: {
+			'exist_img': 'loadExistingImg',
+		},
+		created() {
+			let vm = this;
+			vm.loadExistingImg();
+		}
+	}
+</script>