Merge pull request #369 from vuejs-jp/fix/nuxt-image

fix/ nuxt-imageのdomains設定を修正

Author: jiyuujin

apps/web/app/components/sponsor/SponsorList.vue

@@ -22,7 +22,7 @@ const currentLocale = useLocaleCurrent().locale
           class="sponsor-list-item-link"
           :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sponsors/${item['detail_page_id']}`"
         >
-          <img
+          <NuxtImg
             class="sponsor-list-item-image"
             :src="item['image_url']"
             :alt="item.name"

apps/web/netlify.toml

@@ -57,3 +57,6 @@
   from = "/2024/staff/invite"
   to = "/2024/200.html"
   status = 200
+
+[images]
+  remote_images = ["https://jjdlwtezpdclgxxagxpj.supabase.co/.*"]

apps/web/nuxt.config.ts

@@ -40,7 +40,8 @@ export default defineNuxtConfig({
   //   url: 'https://vuefes.jp/2024/',
   // },
   image: {
-    domains: ['jjdlwtezpdclgxxagxpj.supabase.co'],
+    domains: [process.env.NUXT_IMAGE_DOMAINS],
+    provider: 'netlify',
     quality: 80,
     format: ['avif', 'webp']
   },

packages/ui/components/speaker/Avatar.vue

@@ -19,14 +19,7 @@ const size = computed(() => {
 </script>
 
 <template>
-  <img
-    :src="src"
-    :alt="alt"
-    :loading="loading"
-    :width="size"
-    :height="size"
-    fit="cover"
-  />
+  <NuxtImg :src="src" :alt="alt" :loading="loading" :width="size" :height="size" fit="cover" />
 </template>
 
 <style scoped>