remove placeholder

client/src/components/ui/WagtailImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wagtail-image">
+  <div class="wagtail-image"  :style="backgroundStyle">
     <img
       :src="props.src"
       :srcset="props.srcset"
@@ -11,11 +11,7 @@
       ref="imgElement"
       @load="handleLoad"
     />
-    <div
+
-      class="wagtail-image__placeholder"
-      :style="placeholderStyle"
-      v-show="!loaded"
-    ></div>
   </div>
 </template>
 <script setup>
@@ -36,9 +32,9 @@ const loaded = ref(false);
 
 const updateDimensions = () => {
   if (imgElement.value && imgElement.value.parentElement) {
-    const { clientWidth, clientHeight } = imgElement.value.parentElement;
+    const { parentWidth, parentHeight } = imgElement.value.parentElement;
-    width.value = clientWidth;
+    width.value = parentWidth;
-    height.value = clientHeight;
+    height.value = parentHeight;
   }
 };
 
@@ -63,7 +59,7 @@ const computedSizes = computed(() => {
   return size;
 });
 
-const placeholderStyle = computed(() => {
+const backgroundStyle = computed(() => {
   const styles = {
     width: '100%',
     height: '100%',
@@ -100,6 +96,7 @@ onBeforeUnmount(() => {
 .wagtail-image {
   overflow: hidden;
   height: 100%;
+  background-color: $color-silver-light;
 
   &__image {
     width: 100%;
@@ -107,9 +104,5 @@ onBeforeUnmount(() => {
     object-fit: cover;
     object-position: center;
   }
-
-  &__placeholder {
-    background-color: $color-silver-light;
-  }
 }
 </style>