Initial commit

next.config.ts

@@ -13,13 +13,25 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'app.modstagram.ir',
+        hostname: 'api.modstagram.com',
         port: '',
-        pathname: '/**',  
+        pathname: '/**',
       },
       {
         protocol: 'https',
-        hostname: 'blog.modstagram.com', // اجازه دادن به نمایش تصاویر وبلاگ
+        hostname: 'cdn.modstagram.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'app.modstagram.ir',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'blog.modstagram.com',
         port: '',
         pathname: '/**',
       },

src/app/(auth)/verify/avatar/page.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import Container from "@/components/elements/Container";
 import AuthNextButton from "@/components/auth/AuthNextButton";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import useAxios from "@/hooks/useAxios";
 import { IProfileData } from "@/types/types";
 import Image from "next/image";

src/app/(auth)/verify/confirm/page.tsx

@@ -9,7 +9,7 @@ import Modal from "@/components/elements/Modal";
 import Link from "next/link";
 import Image from "next/image";
 import { useUser } from "@/hooks/useUser";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 
 function Confirm() {
 
@@ -41,7 +41,7 @@ function Confirm() {
             width={280}
             height={280}
             alt={user?.user_name || "user profile"}
-            src={`${IMAGE_BASE_URL}${user?.profile_image}`}
+            src={buildStorageUrl(user?.profile_image)}
             unoptimized={true}
           />
           <div className="flex flex-col justify-center items-center gap-1 mt-1">

src/app/(auth)/verify/national-cart/page.tsx

@@ -9,7 +9,7 @@ import AuthNextButton from "@/components/auth/AuthNextButton";
 import toast from "react-hot-toast";
 import AuthUserDetails from "@/components/auth/AuthUserDetails";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import AuthRules from "@/components/auth/AuthRules";
 
 function NationalCart() {

src/app/(projects)/academy/[id]/[title]/CourseClient.tsx

@@ -20,7 +20,7 @@ import {
 import { Course } from "@/types/types";
 import useAxios from "@/hooks/useAxios";
 import { Comments } from "@/components/academy/CommentsModal";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { usePathname } from "next/navigation";
 import Cookies from "js-cookie";
 
@@ -670,7 +670,7 @@ useEffect(() => {
                             alt={item?.user_id?.user_name || "کاربر"}
                             src={
                               item?.user_id?.profile_image
-                                ? `${IMAGE_BASE_URL}${item.user_id.profile_image}`
+                                ? buildStorageUrl(item.user_id.profile_image)
                                 : "/images/default-avatar.png"
                             }
                             priority={true}

src/app/(projects)/academy/profile/[academyId]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import React, { useEffect, useState } from "react";
 import { Academy, Course } from "@/types/types";
 import Container from "@/components/elements/Container";

src/app/billboards/profile/[...id]/page.tsx

@@ -1,4 +1,4 @@
-import { BASE_URL, IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import React, { cache } from "react";
 import { cookies } from "next/headers";
 import { IAdvertisingProfile } from "@/types/types";

src/app/billboards/profile/[id]/[title]/page.tsx

@@ -1,4 +1,4 @@
-import { BASE_URL, IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import React, { cache } from "react";
 import { cookies } from "next/headers";
 import { IAdvertisingProfile } from "@/types/types";

src/app/posts/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 import { fetchPostById } from "@/api/fetchPostById";
 import PostFeedView from "@/components/posts/PostFeedView";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { Suspense } from "react";
 import PageLoader from "@/components/ui/PageLoader";
 

src/app/settings/academy/storeProfile/page.tsx

@@ -28,7 +28,7 @@ import "leaflet/dist/leaflet.css";
 import { useRouter } from "next/navigation";
 import useAxios from "@/hooks/useAxios";
 import { Academy } from "@/types/types";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 
 // Zod schema for store settings
 const storeSchema = z.object({

src/app/settings/chats/page.tsx

@@ -2,7 +2,7 @@
 
 import Container from "@/components/elements/Container";
 import RoundedInput from "@/components/elements/RoundedInput";
-import { IMAGE_BASE_URL, SOCKET_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, SOCKET_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import PageTitle from "@/components/settings/PageTitle";
 import UserDetails from "@/components/settings/UserDetails";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
@@ -115,7 +115,7 @@ function Chats() {
                             width={56}
                             height={56}
                             alt={item?.user_name}
-                            src={IMAGE_BASE_URL + item?.profile_image}
+                            src={buildStorageUrl(item?.profile_image)}
                             className="h-14 w-14 rounded-full object-cover"
                           />
                         ) : (

src/app/settings/edit/Authentication/page.tsx

@@ -9,7 +9,7 @@ import AuthNextButton from "@/components/auth/AuthNextButton";
 import toast from "react-hot-toast";
 import AuthUserDetails from "@/components/auth/AuthUserDetails";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import AuthRules from "@/components/auth/AuthRules";
 
 function NationalCart() {

src/app/settings/edit/License/page.tsx

@@ -7,7 +7,7 @@ import React, { useState, useEffect } from "react";
 import AuthNextButton from "@/components/auth/AuthNextButton";
 import Image from "next/image";
 import { useUser } from "@/hooks/useUser";
-import { BASE_URL, IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import useAxios from "@/hooks/useAxios";
 import toast from "react-hot-toast";
 import Cookies from "js-cookie";
@@ -185,7 +185,7 @@ function LicensePage() {
             alt={user?.user_name || "user profile"}
             src={
               user?.profile_image
-                ? `${IMAGE_BASE_URL}${user.profile_image}`
+                ? buildStorageUrl(user.profile_image)
                 : "/images/placeholder.png"
             }
             unoptimized={true}

src/app/settings/edit/avatar/page.tsx

@@ -2,7 +2,7 @@
 
 import AuthNextButton from "@/components/auth/AuthNextButton";
 import Container from "@/components/elements/Container";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import useAxios from "@/hooks/useAxios";
 import { useUser } from "@/hooks/useUser";
 import Image from "next/image";

src/app/users/[username]/page.tsx

@@ -1,4 +1,4 @@
-import { BASE_URL, IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import React from "react";
 import { cookies } from "next/headers";
 import { User } from "@/types/types";
@@ -30,7 +30,7 @@ export async function generateMetadata({ params }: IUserProps): Promise<Metadata
 
     const title = `${fullName} - ${username} - ${expertise} - ${city} - مدستاگرام`;
     const description = `${expertise} - ${city} - ${bio}`.slice(0, 160);
-    const profileImage = user.profile_image ? `${IMAGE_BASE_URL}${user.profile_image}` : "/images/logo.png";
+    const profileImage = user.profile_image ? buildStorageUrl(user.profile_image) : "/images/logo.png";
 
     return {
       title, // حفظ تایتل درخواستی شما
@@ -106,7 +106,7 @@ async function UserPage({ params }: IUserProps) {
     name: fullName,
     alternateName: username,
     description: user.bio,
-    image: user.profile_image ? `${IMAGE_BASE_URL}${user.profile_image}` : undefined,
+    image: user.profile_image ? buildStorageUrl(user.profile_image) : undefined,
     jobTitle: user.expertise,
     address: {
       "@type": "PostalAddress",

src/components/NewBillboard/step1/ImageUploader.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { useState } from "react";
 
 type ImageUploaderProps = {

src/components/academy/CommentsModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import Modal from "../elements/Modal";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import RoundedInput from "@/components/elements/RoundedInput";
 import useAxios from "@/hooks/useAxios";
 import toast from "react-hot-toast";
@@ -370,7 +370,7 @@ function CommentsModal({
                       alt={item?.user_id?.user_name || "کاربر"}
                       src={
                         item?.user_id?.profile_image
-                          ? `${IMAGE_BASE_URL}${item.user_id.profile_image}`
+                          ? buildStorageUrl(item.user_id.profile_image)
                           : "/images/default-avatar.png"
                       }
                       priority={true}

src/components/academy/MainModelCard.tsx

@@ -12,7 +12,7 @@ import { Academy, Course } from "@/types/types";
 import Image from "next/image";
 import MainModelCardActions from "./MainModelCardActions";
 import Link from "next/link";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { useUserById } from "@/hooks/getUserById";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";

src/components/academy/ModelHead.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { User } from "@/types/types";
 import Image from "next/image";
 import React, { useState } from "react";
@@ -114,7 +114,7 @@ function ModelHead({ user, item2 }: ModelHeadProps) {
             width={120}
             height={120}
             alt={user_name}
-            src={`${IMAGE_BASE_URL}${profile_image}`}
+            src={buildStorageUrl(profile_image)}
             unoptimized={true}
           />
         ) : (

src/components/billboards/BillboardPage/BillboardImageSlider.tsx

@@ -5,7 +5,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import { Pagination } from "swiper/modules";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 
 interface BillboardImageSliderProps {
   images: string[];

src/components/billboards/MainBillboardCard/BillboardCommentsModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Modal from "../../elements/Modal";
 import Image from "next/image";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import RoundedInput from "@/components/elements/RoundedInput";
 import useAxios from "@/hooks/useAxios";
 
@@ -81,7 +81,7 @@ function BillboardCommentsModal({
                         width={50}
                         height={50}
                         alt={item?.userId?.user_name}
-                        src={`${IMAGE_BASE_URL}${item?.userId?.profile_image}`}
+                        src={buildStorageUrl(item?.userId?.profile_image)}
                         priority={true}
                         unoptimized={true}
                       />

src/components/billboards/MainBillboardCard/MainBillboardCard.tsx

@@ -1,5 +1,5 @@
 import RoundedDiv from "@/components/elements/RoundedDiv";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { IAdvertising } from "@/types/types";
 import Image from "next/image";
 import Link from "next/link";

src/components/billboards/NewBillboard/step1/ImageUploader.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { useState } from "react";
 
 type ImageUploaderProps = {

src/components/billboards/Profile/AdProfileContentPosts.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import React, { useState } from "react";
 import Modal from "react-modal";
 import { Swiper, SwiperSlide } from "swiper/react";

src/components/billboards/Profile/AdProfileHead.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { IAdvertisingProfile } from "@/types/types";
 import Image from "next/image";
 import React, { useState } from "react";
@@ -45,7 +45,7 @@ function AdProfileHead({ profile, id }: AdProfileHeadProps) {
             width={120}
             height={120}
             alt={profile?.vitrine_name || "Name"}
-            src={`${IMAGE_BASE_URL}${profile_image}`}
+            src={buildStorageUrl(profile_image)}
             unoptimized={true}
           />
         ) : (
@@ -97,7 +97,7 @@ function AdProfileHead({ profile, id }: AdProfileHeadProps) {
             width={120}
             height={120}
             alt={profile?.vitrine_name || "Name"}
-            src={`${IMAGE_BASE_URL}${profile_image}`}
+            src={buildStorageUrl(profile_image)}
             unoptimized={true}
           />
         ) : (

src/components/chat/ChatHeader.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { FiChevronRight } from "react-icons/fi";
-import { IMAGE_BASE_URL } from "../main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "../main/BaseUrl";
 import { useRouter } from "next/navigation";
 import ChatHeaderMenu from "./ChatHeaderMenu";
 
@@ -46,7 +46,7 @@ function ChatHeader({
               width={40}
               height={40}
               alt=""
-              src={IMAGE_BASE_URL + user.profile_image}
+              src={buildStorageUrl(user.profile_image)}
               className="h-10 w-10 shrink-0 rounded-full object-cover"
             />
           ) : (

src/components/chat/ChatMessageCard.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import Link from "next/link";
 import { User } from "@/types/types";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import ReadReceipt from "./ReadReceipt";
 import VoiceMessagePlayer from "./VoiceMessagePlayer";
 import FileMessageBubble from "./FileMessageBubble";

src/components/chat/ForwardMessageModal.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import useAxios from "@/hooks/useAxios";
 import toast from "react-hot-toast";
 import IOSSpinner from "@/components/ui/IOSSpinner";
@@ -147,7 +147,7 @@ export default function ForwardMessageModal({
                   >
                     {u.profile_image ? (
                       <Image
-                        src={IMAGE_BASE_URL + u.profile_image}
+                        src={buildStorageUrl(u.profile_image)}
                         width={40}
                         height={40}
                         alt=""

src/components/chat/MessageCard.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { User } from "@/types/types";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { FiCheck, FiCheckCircle } from "react-icons/fi"; // اضافه کردن آیکون‌ها
 
 interface Message {

src/components/course/CourseForm.tsx

@@ -32,7 +32,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Trash2, Video, Plus, Upload, FileVideo, Play } from "lucide-react";
 import useAxios from "@/hooks/useAxios";
-import { BASE_URL, IMAGE_BASE_URL } from "../main/BaseUrl";
+import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "../main/BaseUrl";
 
 // ==========================================
 // تغییر: حذف IAdvertisingCategory و استفاده از نوع جدید

src/components/course/CourseList.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Edit, Trash2, Video, Clock, DollarSign, Highlighter, ChevronLeft, ChevronRight } from "lucide-react";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "../main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "../main/BaseUrl";
 import PageLoader from "@/components/ui/PageLoader";
 
 interface CourseListProps {

src/components/explore/ExploreGrid.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { fetchPosts } from "@/api/fetchPosts";
 import { Post } from "@/types/types";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import Cookies from "js-cookie";
 import { useCallback, useEffect } from "react";
 import PageLoader from "@/components/ui/PageLoader";

src/components/main/BaseUrl.ts

@@ -2,6 +2,24 @@
 // export const BASE_URL = "http://localhost:8000/api/v1";
 // export const IMAGE_BASE_URL = "http://localhost:8000/storage";
 
-export const SOCKET_URL = "https://app.modstagram.ir";
-export const BASE_URL = "https://app.modstagram.ir/api/v1";
-export const IMAGE_BASE_URL = "https://app.modstagram.ir/storage";
+export const SOCKET_URL = "https://api.modstagram.com";
+export const BASE_URL = "https://api.modstagram.com/api/v1";
+export const IMAGE_BASE_URL = "https://api.modstagram.com/storage";
+
+/** ساخت URL کامل فایل storage — مسیرهای DB را یکسان می‌کند */
+export function buildStorageUrl(path: string | null | undefined): string {
+  if (!path) return "";
+  if (path.startsWith("http://") || path.startsWith("https://")) return path;
+
+  let normalized = String(path).replace(/\\/g, "/");
+  normalized = normalized.replace("/root/modstagram-back/storage", "");
+
+  if (normalized.startsWith("/storage/")) {
+    normalized = normalized.slice("/storage".length);
+  } else if (normalized.startsWith("storage/")) {
+    normalized = `/${normalized.slice("storage/".length)}`;
+  }
+
+  if (!normalized.startsWith("/")) normalized = `/${normalized}`;
+  return `${IMAGE_BASE_URL.replace(/\/$/, "")}${normalized}`;
+}

src/components/main/Services/AddServiceModal.tsx

@@ -4,7 +4,7 @@ import AuthNextButton from "@/components/auth/AuthNextButton";
 import Modal from "@/components/elements/Modal";
 import { Service } from "@/types/types";
 import React, { useState } from "react";
-import { IMAGE_BASE_URL } from "../BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "../BaseUrl";
 import Image from "next/image";
 import toast from "react-hot-toast";
 import { v4 as uuidv4 } from "uuid"; // ✅ استفاده از uuid

src/components/main/Services/ServiceItem.tsx

@@ -3,7 +3,7 @@
 import { Service } from "@/types/types";
 import Image from "next/image";
 import React from "react";
-import { IMAGE_BASE_URL } from "../BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "../BaseUrl";
 
 interface ServiceItemProps {
   service: Service;

src/components/main/UserInfo.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import React from "react";
-import { IMAGE_BASE_URL } from "./BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "./BaseUrl";
 import Link from "next/link";
 
 interface IUserInfoProps {
@@ -31,7 +31,7 @@ function UserInfo({
             width={75}
             height={75}
             alt={user_name || ""}
-            src={`${IMAGE_BASE_URL}${profile_image}`}
+            src={buildStorageUrl(profile_image)}
             unoptimized={true}
           />
         ) : (
@@ -52,7 +52,7 @@ function UserInfo({
               width={75}
               height={75}
               alt={user_name || ""}
-              src={`${IMAGE_BASE_URL}${profile_image}`}
+              src={buildStorageUrl(profile_image)}
               unoptimized={true}
             />
           ) : (

src/components/models/MainModelCard/CommentsModal.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Modal from "../../elements/Modal";
 import Image from "next/image";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import RoundedInput from "@/components/elements/RoundedInput";
 import useAxios from "@/hooks/useAxios";
 import toast from "react-hot-toast";
@@ -124,7 +124,7 @@ function CommentsModal({ isOpen, onClose, userId, postId }: CommentsModalProps)
                   width={50}
                   height={50}
                   alt={item?.user?.user_name}
-                  src={`${IMAGE_BASE_URL}${item?.user?.profile_image}`}
+                  src={buildStorageUrl(item?.user?.profile_image)}
                   unoptimized
                 />
                 <div className="text-sm">

src/components/models/MainModelCard/MainModelCard.tsx

@@ -11,7 +11,7 @@ import { Post } from "@/types/types";
 import Image from "next/image";
 import MainModelCardActions from "./MainModelCardActions";
 import Link from "next/link";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { useUserById } from "@/hooks/getUserById";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
@@ -170,13 +170,14 @@ function MainModelCard({ postData }: { postData: Post }) {
             <Image
               src={
                 profile_image
-                  ? `${IMAGE_BASE_URL}${profile_image}`
+                  ? buildStorageUrl(profile_image)
                   : "/images/fake-avatar.png"
               }
               alt={user_name}
               fill
               className="rounded-xl object-cover"
               priority
+              unoptimized
             />
           </div>
           <div className="font-semibold flex gap-2 flex-col-reverse ml-2 w-full">

src/components/models/ModelPage/MainModelCardPost.tsx

@@ -5,7 +5,7 @@ import { Post } from "@/types/types";
 import Image from "next/image";
 import MainModelCardActions from "../MainModelCard/MainModelCardActions";
 import Link from "next/link";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { useUserById } from "@/hooks/getUserById";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
@@ -169,7 +169,7 @@ function MainModelCard({ postData }: { postData: Post }) {
             <Image
               src={
                 profile_image
-                  ? `${IMAGE_BASE_URL}${profile_image}`
+                  ? buildStorageUrl(profile_image)
                   : "/images/fake-avatar.png"
               }
               alt={user_name}

src/components/models/ModelPage/ModelContentPosts.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { fetchPosts } from "@/api/fetchPosts";
 import { Post, User } from "@/types/types";
 import axios from "axios";
-import { BASE_URL, IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { BASE_URL, IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import Image from "next/image";
 import { FaPlay } from "react-icons/fa";
 import { ChatListSkeleton } from "@/components/ui/ChatSkeletons";

src/components/models/ModelPage/ModelHead.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { User } from "@/types/types";
 import Image from "next/image";
 import React, { useState } from "react";
@@ -114,7 +114,7 @@ function ModelHead({ user, item2 }: ModelHeadProps) {
             width={120}
             height={120}
             alt={user_name}
-            src={`${IMAGE_BASE_URL}${profile_image}`}
+            src={buildStorageUrl(profile_image)}
             unoptimized={true}
           />
         ) : (

src/components/posts/TagUsersPicker.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import useAxios from "@/hooks/useAxios";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import { FiUserPlus, FiX } from "react-icons/fi";
 import toast from "react-hot-toast";
 
@@ -111,7 +111,7 @@ export default function TagUsersPicker({
                 >
                   {u.profile_image ? (
                     <Image
-                      src={IMAGE_BASE_URL + u.profile_image}
+                      src={buildStorageUrl(u.profile_image)}
                       alt=""
                       width={32}
                       height={32}

src/components/projects/ProjectPage/ProjectCreator.tsx

@@ -1,7 +1,7 @@
 import { IProjectCreator } from "@/types/types";
 import React from "react";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import Link from "next/link";
 
 function ProjectCreator({ creator }: { creator: IProjectCreator }) {
@@ -16,7 +16,7 @@ function ProjectCreator({ creator }: { creator: IProjectCreator }) {
           width={120}
           height={120}
           alt={creator?.user_name}
-          src={`${IMAGE_BASE_URL}${creator?.profile_image}`}
+          src={buildStorageUrl(creator?.profile_image)}
           unoptimized={true}
         />
       )}

src/components/settings/UserDetails.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
-import { IMAGE_BASE_URL } from "../main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "../main/BaseUrl";
 import CompleteRegister from "./settings/CompleteRegister";
 import Link from "next/link";
 import { useUser } from "@/hooks/useUser";
@@ -29,7 +29,7 @@ function UserDetails() {
           width={120}
           height={120}
           alt={user?.user_name || "user profile"}
-          src={`${IMAGE_BASE_URL}${user?.profile_image}`}
+          src={buildStorageUrl(user?.profile_image)}
           unoptimized={true}
         />
         <div className="flex flex-col gap-1">

src/components/settings/my-billboards/Profile/AvatarUploader.tsx

@@ -1,7 +1,7 @@
 // components/AvatarUploader.tsx
 import React from "react";
 import Image from "next/image";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 
 interface AvatarUploaderProps {
   avatar: string | null;

src/config/SEO.tsx

@@ -1,6 +1,6 @@
 /*@typescript-eslint/no-explicit-any*/
 
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
 import Head from "next/head";
 
 type SEOProps = {
@@ -24,7 +24,7 @@ const SEO: React.FC<SEOProps> = ({ type, data }) => {
     case "user":
       title = `${data.first_name} ${data.last_name} `;
       description = `${data.bio} - ${data.user_name} - ${data.expertise}`;
-      image = `${IMAGE_BASE_URL}${data.profile_image}`;
+      image = buildStorageUrl(data.profile_image);
       break;
 
     case "billboard":