[fix] use a workaround to avoid the issue in which width and height s…

…et by modifiders turn to undefined in the provider

components/Images.vue

@@ -80,13 +80,10 @@ export default {
   methods: {
     handleData() {
       for (const image of this.images) {
-        image.thumb = this.$img(image.file_path, {
-          modifiers: {
-            width: this.type === 'poster' ? 370 : 533,
-            height: this.type === 'poster' ? 556 : 300
-          }
-        }).url;
-        image.src = this.$img(image.file_path).url;
+        image.thumbSrc = image.file_path;
+        image.thumbWidth = this.type === 'poster' ? 370 : 533;
+        image.thumbHeight = this.type === 'poster' ? 556 : 300;
+        image.src = image.file_path;
       }
     },
 

components/ImagesItem.vue

@@ -2,13 +2,15 @@
 <template>
   <div :class="[$style.item, $style[type]]">
     <a
-      :href="image.thumb"
+      :href="image.thumbSrc"
       @click.prevent="handleGallery(index)">
       <div :class="$style.image">
         <nuxt-img
-          v-if="image.thumb"
+          v-if="image.thumbSrc"
           loading="lazy"
-          :src="image.thumb" />
+          :src="image.thumbSrc"
+          :width="image.thumbWidth"
+          :height="image.thumbHeight" />
       </div>
     </a>
   </div>

utils/tmdb-image.js

@@ -4,7 +4,6 @@ import { joinURL } from 'ufo';
 import { TMDB_IMAGE_URL } from '~/config/tmdbAPI';
 
 // RE: https://image.nuxtjs.org/advanced/custom-provider
-
 function getImage(src, { modifiers = {} } = {}) {
   const { width, height } = modifiers;