src/components/ui/VnImg.vue

@@ -53,6 +53,10 @@ const props = defineProps({
     editImageName: {
         type: String,
         default: ''
+    },
+    alwaysShowEditButton: {
+        type: Boolean,
+        default: false
     }
 });
 
@@ -69,9 +73,10 @@ const url = computed(() => {
             v-if="props.editable"
             icon="add_a_photo"
             class="show-edit-button absolute-top-left"
+            :class="{ hide: !props.alwaysShowEditButton }"
             round
             text-color="black"
-            @click.stop="showEditForm = !showEditForm"
+            @click.stop.prevent="showEditForm = !showEditForm"
         />
         <QImg
             :class="{
@@ -86,7 +91,15 @@ const url = computed(() => {
             spinner-color="primary"
             :width="props.width"
             :height="props.height"
-        />
+        >
+            <template #error>
+                <div
+                    class="full-width full-height flex justify-center items-center"
+                >
+                    <QIcon name="image" size="sm" />
+                </div>
+            </template>
+        </QImg>
     </div>
 
     <QDialog v-if="props.zoomSize" v-model="showZoom">
@@ -102,7 +115,7 @@ const url = computed(() => {
         <ImageEditor
             class="all-pointer-events"
             :schema="props.editSchema"
-            :imageName="props.editImageName"
+            :image-name="props.editImageName"
             @close="showEditForm = false"
         />
     </QDialog>
@@ -127,8 +140,11 @@ const url = computed(() => {
     min-width: 50px;
 }
 
-.show-edit-button {
+.hide {
     visibility: hidden;
+}
+
+.show-edit-button {
     cursor: pointer;
     background-color: $gray-light;
     z-index: 1;

src/pages/Admin/NewsDetails.vue

@@ -97,6 +97,7 @@ onMounted(async () => {
                     rounded
                     editable
                     edit-schema="catalog"
+                    always-show-edit-button
                 />
                 <VnInput
                     v-model="data.title"