UPDATE: Change CDN

next.config.ts

@@ -30,8 +30,8 @@ const nextConfig: NextConfig = {
         pathname: "**",
       },
       {
-        protocol: "http",
-        hostname: "cdn.kain.id.vn",
+        protocol: "https",
+        hostname: "r2.kain.id.vn",
         pathname: "**",
       }
     ],
@@ -40,7 +40,7 @@ const nextConfig: NextConfig = {
     styledComponents: true,
   },
   env: {
-    CDN_URL: "https://cdn.kain.id.vn/firefly/assets/asbres",
+    CDN_URL: "https:/r2.kain.id.vn/asbres",
   },
 };
 

src/components/card/lightconeCard.tsx

@@ -31,7 +31,8 @@ export default function LightconeCard({ data }: LightconeCardProps) {
                     <Image
                         loading="lazy"
                         src={`${process.env.CDN_URL}/${data.thumbnail}`}
-                        unoptimized={true}
+                        unoptimized
+                        crossOrigin="anonymous"
                         width={348}
                         height={408}
                         className="w-full h-full rounded-md object-cover"

src/components/card/profileCard.tsx

@@ -27,6 +27,8 @@ export default function ProfileCard({ profile, selectedProfile, onProfileToggle
                 <div className="">
                     <div className="rounded-lg h-42 flex items-center justify-center">
                         <Image
+                            unoptimized
+                            crossOrigin="anonymous"
                             src={`${process.env.CDN_URL}/spriteoutput/lightconemaxfigures/${profile.lightcone.item_id}.png`}
                             alt={mapLightconeInfo[profile.lightcone.item_id.toString()]?.Name}
                             width={348}
@@ -55,6 +57,8 @@ export default function ProfileCard({ profile, selectedProfile, onProfileToggle
                         <div key={index} className="relative">
                             <div className="w-9 h-9 rounded-lg flex items-center justify-center border border-amber-500/50">
                                 <Image
+                                    unoptimized
+                                    crossOrigin="anonymous"
                                     src={`${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${relic.relic_set_id}_${relic.relic_id.toString()[relic.relic_id.toString().length - 1]}.webp`}
                                     alt="Relic"
                                     width={124}

src/components/card/relicCard.tsx

@@ -24,6 +24,8 @@ const getRarityName = (slot: string) => {
         case '1': return (
             <div className="flex items-center gap-1">
                 <Image
+                    unoptimized
+                    crossOrigin="anonymous"
                     src="/relics/HEAD.png"
                     alt="Head"
                     width={20}
@@ -36,6 +38,8 @@ const getRarityName = (slot: string) => {
         case '2': return (
             <div className="flex items-center gap-1">
                 <Image
+                    unoptimized
+                    crossOrigin="anonymous"
                     src="/relics/HAND.png"
                     alt="Hand"
                     width={20}
@@ -48,6 +52,8 @@ const getRarityName = (slot: string) => {
         case '3': return (
             <div className="flex items-center gap-1">
                 <Image
+                    unoptimized
+                    crossOrigin="anonymous"
                     src="/relics/BODY.png"
                     alt="Body"
                     width={20}
@@ -60,6 +66,8 @@ const getRarityName = (slot: string) => {
         case '4': return (
             <div className="flex items-center gap-1">
                 <Image
+                    unoptimized
+                    crossOrigin="anonymous"
                     src="/relics/FOOT.png"
                     alt="Foot"
                     width={20}
@@ -72,6 +80,8 @@ const getRarityName = (slot: string) => {
         case '5': return (
             <div className="flex items-center gap-1">
                 <Image
+                    unoptimized
+                    crossOrigin="anonymous"
                     src="/relics/NECK.png"
                     alt="Neck"
                     width={20}
@@ -84,6 +94,8 @@ const getRarityName = (slot: string) => {
         case '6': return (
             <div className="flex items-center gap-1">
                 <Image
+                    unoptimized
+                    crossOrigin="anonymous"
                     src="/relics/OBJECT.png"
                     alt="Object"
                     width={20}
@@ -128,9 +140,10 @@ export default function RelicCard({ slot, avatarId }: RelicCardProps) {
                     >
                         <span>
                             <Image
+                                unoptimized
+                                crossOrigin="anonymous"
                                 src={`${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${relicDetail.relic_set_id}_${slot}.png`}
                                 alt="Relic"
-                                unoptimized={true}
                                 width={124}
                                 height={124}
                                 className="w-14 h-14 object-contain"

src/components/eidolonsInfo/index.tsx

@@ -50,6 +50,8 @@ export default function EidolonsInfo() {
                                     src={`${process.env.CDN_URL}/ui/ui3d/rank/_dependencies/textures/${avatarSelected?.id}/${avatarSelected?.id}_Rank_${key}.png`}
                                     alt={`Rank ${key}`}
                                     priority
+                                    unoptimized
+                                    crossOrigin="anonymous"
                                     width={240}
                                     height={240}
                                 />