placeholder

joomla · Feb 7, 2022 · a19aee1 · a19aee1
1 parent 05610fd
commit a19aee1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/image.vue b/administrator/components/com_media/resources/scripts/components/browser/items/image.vue
@@ -10,13 +10,15 @@
     >
       <div class="image-background">
         <img
+          v-if="getURL"
           class="image-cropped"
           :src="getURL"
           :alt="altTag"
           loading="lazy"
           :width="width"
           :height="height"
-        >
+        />
+        <span v-if="!getURL" class="icon-eye-slash image-placeholder"></span>
       </div>
     </div>
     <div

diff --git a/build/media_source/com_media/scss/components/_media-browser.scss b/build/media_source/com_media/scss/components/_media-browser.scss
@@ -211,6 +211,16 @@
   border-radius: $grid-item-border-radius;
 }
 
+.image-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+  max-width: 100%;
+  height: auto;
+  color: #9d9d9d;
+}
+
 .file-background, .folder-background {
   padding-bottom: 100%;
   background-color: hsl(var(--hue), 20%, 97%);