🚀Perf: 画像取得の際の名称変更

- 例: soni→soni.jpg
m1daily · Sep 2, 2024 · ca03e04 · ca03e04
1 parent 8207946
commit ca03e04
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/src/components/ProfileCard.astro b/src/components/ProfileCard.astro
@@ -2,7 +2,7 @@
 import { Image } from 'astro:assets';
 const files = await Astro.glob("../assets/profile/avatars/*.{png,jpg,jpeg}");
 const images = files.reduce((acc, file) => {
-  acc[file.default.src.split('/').pop().split('.')[0]] = file.default;
+  acc[file.default.src.split('/').pop().split('?')[0]] = file.default;
   return acc;
 }, {});
 const { name } = Astro.props;

diff --git a/src/data/members.json b/src/data/members.json
@@ -2,7 +2,7 @@
     {
         "name": "Soni",
         "roles": "管理者/システム開発/フロントエンド開発/広報/モデレーター/プロジェクトマネージャー",
-        "avatar": "soni",
+        "avatar": "soni.jpg",
         "bio": "R6卒の浪人生。麻雀が好き。",
         "social": {
             "twitter": "sonipana1007",

diff --git a/src/pages/profile.astro b/src/pages/profile.astro
@@ -6,7 +6,7 @@ import { Image } from 'astro:assets';
 const pageTitle = 'Profile';
 const files = await Astro.glob("../assets/profile/*.{png,jpg,jpeg}");
 const images = files.reduce((acc, file) => {
-  acc[file.default.src.split('/').pop().split('.')[0]] = file.default;
+  acc[file.default.src.split('/').pop().split('?')[0]] = file.default;
   return acc;
 }, {});
 ---
@@ -38,13 +38,13 @@ const images = files.reduce((acc, file) => {
       </div>
 
       <div class="relative ms-4">
-        <Image class="w-full rounded-md" src={images.monitor} alt="monitor" />
+        <Image class="w-full rounded-md" src={images["monitor.jpg"]} alt="monitor" />
       </div>
     </div>
 
     <div class="grid mt-20 md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
       <div class="relative ms-4">
-        <Image class="w-full rounded-md border border-gray-200" src={images.github} alt="GitHub" />
+        <Image class="w-full rounded-md border border-gray-200" src={images["github.png"]} alt="GitHub" />
       </div>
 
       <div class="justify-center">

diff --git a/src/scripts/images.js b/src/scripts/images.js
@@ -3,6 +3,7 @@ async function getImages(files) {
   const images = files.reduce((acc, file) => {
     const image = file.default;
     const fileName = image.src.split('/').pop().split('.')[0]; // ファイル名を抽出
+    const fileName2 = image.src.split('/').pop().split('?')[0]; // 拡張子を含めてファイル名を抽出
     acc[fileName] = image;
     return acc;
   }, {});