✨ Handle cover for different aspect ratios

src/components/NFTCover.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="bg-gray-9b"
+    :style="rootStyle"
+  >
+    <img
+      v-if="src && !isError"
+      v-bind="imgProps"
+      :src="resizedSrc"
+      @load="handleImageLoad"
+      @error="handleImageError"
+    >
+    <img
+      v-else
+      v-bind="imgProps"
+      src="~/assets/images/nft/primitive-nft.png"
+    >
+  </div>
+</template>
+
+<script>
+import { getLikeCoResizedImageUrl } from '~/util/ui';
+
+export default {
+  name: 'NFTCover',
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 720,
+    },
+    bgColor: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isError: false,
+    };
+  },
+  computed: {
+    rootStyle() {
+      return {
+        backgroundColor: this.imgBgColor,
+      };
+    },
+    imgProps() {
+      return {
+        class: 'object-contain w-full',
+        loading: 'lazy',
+        ...this.$attrs,
+      };
+    },
+    resizedSrc() {
+      return getLikeCoResizedImageUrl(this.src, this.size);
+    },
+  },
+  watch: {
+    src() {
+      this.isError = false;
+    },
+  },
+  methods: {
+    handleImageLoad(e) {
+      this.$emit('load', e);
+    },
+    handleImageError() {
+      this.isError = true;
+    },
+  },
+};
+</script>

src/components/NFTPage/PreviewCard.vue

@@ -11,25 +11,10 @@
     ]"
     :has-padding="false"
   >
-    <div
-      v-if="imageUrl"
-      class="h-[180px]"
-      :style="`background-color: ${imageBgColor}`"
-    >
-      <img
-        class="object-cover w-full max-h-[180px]"
-        :src="resizedImageSrc"
-      >
-    </div>
-    <div
-      v-else
-      class="h-[180px]"
-    >
-      <img
-        class="object-cover h-full max-h-[180px]"
-        src="~/assets/images/nft/primitive-nft.png"
-      >
-    </div>
+    <NFTCover
+      :src="imageUrl"
+      :bg-color="imageBgColor"
+    />
     <div
       :class="[
         'flex',
@@ -134,12 +119,7 @@
 </template>
 
 <script>
-import {
-  ellipsis,
-  ellipsisDescription,
-  formatNumberWithLIKE,
-  getLikeCoResizedImageUrl,
-} from '~/util/ui';
+import { ellipsis, ellipsisDescription, formatNumberWithLIKE } from '~/util/ui';
 
 import nftClassCollectionMixin from '~/mixins/nft-class-collection';
 
@@ -231,12 +211,6 @@ export default {
     formattedNFTPrice() {
       return `${this.nftPrice || '-'} LIKE`;
     },
-    imageSize() {
-      return 720;
-    },
-    resizedImageSrc() {
-      return getLikeCoResizedImageUrl(this.imageUrl, this.imageSize);
-    },
   },
   methods: {
     handleClickCollect() {

src/components/NFTPortfolio/Base.vue

@@ -4,22 +4,11 @@
     :is-writing-nft="isWritingNFT"
   >
     <NFTPortfolioCard>
-      <div
-        class="h-[180px]"
-        :style="`background-color: ${imageBgColor}`"
-      >
-        <img
-          v-if="imageSrc"
-          loading="lazy"
-          class="object-cover w-full h-full max-h-[180px]"
-          :src="resizedImageSrc"
-        >
-        <img
-          v-else
-          class="object-cover w-full h-full max-h-[180px]"
-          src="~/assets/images/nft/primitive-nft.png"
-        >
-      </div>
+      <NFTCover
+        :src="imageSrc"
+        :size="350"
+        :bg-color="imageBgColor"
+      />
       <div
         :class="[
           'flex',
@@ -89,11 +78,7 @@
 </template>
 
 <script>
-import {
-  ellipsis,
-  formatNumberWithLIKE,
-  getLikeCoResizedImageUrl,
-} from '~/util/ui';
+import { ellipsis, formatNumberWithLIKE } from '~/util/ui';
 
 import nftClassCollectionMixin from '~/mixins/nft-class-collection';
 
@@ -161,14 +146,6 @@ export default {
       default: '',
     },
   },
-  computed: {
-    imageSize() {
-      return 350;
-    },
-    resizedImageSrc() {
-      return getLikeCoResizedImageUrl(this.imageSrc, this.imageSize);
-    },
-  },
   methods: {
     handleClickCollect(event) {
       this.$emit('collect', event);

src/components/NFTWidget/ContentPreview.vue

@@ -5,13 +5,13 @@
     v-bind="$attrs"
     @click="handleClick"
   >
-    <div
+    <NFTCover
       v-if="imgSrc"
-      class="grow bg-gray-9b"
-      :style="imgStyle"
-    >
-      <img class="block object-contain" loading="lazy" :src="resizedImageSrc" :alt="title">
-    </div>
+      class="grow"
+      :src="imgSrc"
+      :size="450"
+      :alt="title"
+    />
     <div class="p-[16px] shrink-0">
       <div class="text-[16px] leading-[1.25] font-[600] line-clamp-2">{{ title }}</div>
       <div class="text-[16px] leading-[1.25] font-[400] mt-[4px] line-clamp-4">
@@ -22,8 +22,6 @@
 </template>
 
 <script>
-import { getLikeCoResizedImageUrl } from '~/util/ui';
-
 export default {
   props: {
     imgSrc: {
@@ -47,19 +45,6 @@ export default {
       default: 'div',
     },
   },
-  computed: {
-    imgStyle() {
-      return {
-        backgroundColor: this.imgBgColor,
-      };
-    },
-    imageSize() {
-      return 450;
-    },
-    resizedImageSrc() {
-      return getLikeCoResizedImageUrl(this.imgSrc, this.imageSize);
-    },
-  },
   methods: {
     handleClick(event) {
       this.$emit('click', event);