feat: Update image source paths to use S3 public URL for profile and task attachments

This commit is contained in:
2024-11-23 17:22:37 +02:00
parent 14284e1d35
commit 37e0a7d3f2
6 changed files with 14 additions and 9 deletions

View File

@@ -77,7 +77,7 @@ const Navbar = () => {
<div className="align-center flex h-9 w-9 justify-center"> <div className="align-center flex h-9 w-9 justify-center">
{!!currentUserDetails?.profilePictureUrl ? ( {!!currentUserDetails?.profilePictureUrl ? (
<Image <Image
src={`/${currentUserDetails?.profilePictureUrl}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
alt={currentUserDetails?.username || "User Profile Picture"} alt={currentUserDetails?.username || "User Profile Picture"}
width={100} width={100}
height={50} height={50}

View File

@@ -70,7 +70,12 @@ const Sidebar = () => {
)} )}
</div> </div>
<div className="flex items-center gap-5 border-y-[1.5px] border-gray-200 px-8 py-4 dark:border-gray-700"> <div className="flex items-center gap-5 border-y-[1.5px] border-gray-200 px-8 py-4 dark:border-gray-700">
<Image src="/logo.png" alt="logo" width={40} height={40} /> <Image
src={`${process.env.S3_PUBLIC_IMAGE_URL}/logo.png`}
alt="logo"
width={40}
height={40}
/>
<div> <div>
<h3 className="text-md font-bold tracking-widest dark:text-gray-200"> <h3 className="text-md font-bold tracking-widest dark:text-gray-200">
Tasker.IO Tasker.IO
@@ -157,7 +162,7 @@ const Sidebar = () => {
<div className="align-center flex h-9 w-9 justify-center"> <div className="align-center flex h-9 w-9 justify-center">
{!!currentUserDetails?.profilePictureUrl ? ( {!!currentUserDetails?.profilePictureUrl ? (
<Image <Image
src={`/${currentUserDetails?.profilePictureUrl}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
alt={currentUserDetails?.username || "User Profile Picture"} alt={currentUserDetails?.username || "User Profile Picture"}
width={100} width={100}
height={50} height={50}

View File

@@ -16,7 +16,7 @@ const TaskCard = ({ task }: Props) => {
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{task.attachments && task.attachments.length > 0 && ( {task.attachments && task.attachments.length > 0 && (
<Image <Image
src={`/${task.attachments[0].fileURL}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
alt={task.attachments[0].fileName} alt={task.attachments[0].fileName}
width={400} width={400}
height={200} height={200}

View File

@@ -11,7 +11,7 @@ const UserCard = ({ user }: Props) => {
<div className="flex items-center rounded border p-4 shadow"> <div className="flex items-center rounded border p-4 shadow">
{user.profilePictureUrl && ( {user.profilePictureUrl && (
<Image <Image
src={`/${user.profilePictureUrl}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${user.profilePictureUrl}`}
alt="profile picture" alt="profile picture"
width={32} width={32}
height={32} height={32}

View File

@@ -197,7 +197,7 @@ const Task = ({ task }: TaskProps) => {
> >
{task.attachments && task.attachments.length > 0 && ( {task.attachments && task.attachments.length > 0 && (
<Image <Image
src={`/${task.attachments[0].fileURL}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
alt={task.attachments[0].fileName} alt={task.attachments[0].fileName}
width={400} width={400}
height={200} height={200}
@@ -249,7 +249,7 @@ const Task = ({ task }: TaskProps) => {
{task.assignee && ( {task.assignee && (
<Image <Image
key={task.assignee.userId} key={task.assignee.userId}
src={`/${task.assignee.profilePictureUrl!}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.assignee.profilePictureUrl!}`}
alt={task.assignee.username} alt={task.assignee.username}
width={30} width={30}
height={30} height={30}
@@ -259,7 +259,7 @@ const Task = ({ task }: TaskProps) => {
{task.author && ( {task.author && (
<Image <Image
key={task.author.userId} key={task.author.userId}
src={`/${task.author.profilePictureUrl!}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
alt={task.author.username} alt={task.author.username}
width={30} width={30}
height={30} height={30}

View File

@@ -31,7 +31,7 @@ const columns: GridColDef[] = [
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="h-9 w-9"> <div className="h-9 w-9">
<Image <Image
src={`/${params.value}`} src={`${process.env.S3_PUBLIC_IMAGE_URL}/${params.value}`}
alt={params.row.username} alt={params.row.username}
width={100} width={100}
height={50} height={50}