From c69d1876f9047abec609e8e301102fe71490dd82 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Wed, 26 Feb 2025 01:46:38 +0530
Subject: [PATCH] fix images not showing
---
skillswap/src/components/header.jsx | 8 +++-----
skillswap/src/components/login-form.jsx | 4 +++-
skillswap/src/components/register-form.jsx | 4 +++-
skillswap/src/pages/Landing.jsx | 11 ++++++++---
4 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/skillswap/src/components/header.jsx b/skillswap/src/components/header.jsx
index 9b9d09e..90cec16 100644
--- a/skillswap/src/components/header.jsx
+++ b/skillswap/src/components/header.jsx
@@ -1,16 +1,14 @@
import { Link } from 'react-router-dom';
import { Button } from './ui/button';
+import Logo from '../assets/logo.svg';
+
export default function Header() {
return (
<header>
<nav className='bg-violet-50 py-2 px-4 md:px-6 lg:px-10 flex items-center justify-between'>
<Link to='/'>
- <img
- src='/src/assets/logo.svg'
- className='h-16 w-auto'
- alt='SkillSwap Logo'
- />
+ <img src={Logo} className='h-16 w-auto' alt='SkillSwap Logo' />
</Link>
<div className='flex items-center gap-5'>
diff --git a/skillswap/src/components/login-form.jsx b/skillswap/src/components/login-form.jsx
index 536203a..6e19fa5 100644
--- a/skillswap/src/components/login-form.jsx
+++ b/skillswap/src/components/login-form.jsx
@@ -4,6 +4,8 @@ import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
+import loginIllustration from '../assets/form-illustration.svg';
+
export function LoginForm({ className, ...props }) {
return (
<div className={cn('flex flex-col gap-6', className)} {...props}>
@@ -90,7 +92,7 @@ export function LoginForm({ className, ...props }) {
</form>
<div className='relative hidden bg-violet-50 md:inline-flex md:items-center'>
<img
- src='/src/assets/form-illustration.svg'
+ src={loginIllustration}
alt='Image'
className='w-full dark:brightness-[0.2] dark:grayscale'
/>
diff --git a/skillswap/src/components/register-form.jsx b/skillswap/src/components/register-form.jsx
index 62280e6..1938a5d 100644
--- a/skillswap/src/components/register-form.jsx
+++ b/skillswap/src/components/register-form.jsx
@@ -4,6 +4,8 @@ import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
+import registerIllustration from '../assets/register-illustration.svg';
+
export function RegisterForm({ className, ...props }) {
return (
<div className={cn('flex flex-col gap-6', className)} {...props}>
@@ -102,7 +104,7 @@ export function RegisterForm({ className, ...props }) {
</form>
<div className='relative hidden bg-violet-50 md:inline-flex md:items-center'>
<img
- src='/src/assets/register-illustration.svg'
+ src={registerIllustration}
alt='Image'
className='w-full dark:brightness-[0.2] dark:grayscale'
/>
diff --git a/skillswap/src/pages/Landing.jsx b/skillswap/src/pages/Landing.jsx
index 478075d..6347293 100644
--- a/skillswap/src/pages/Landing.jsx
+++ b/skillswap/src/pages/Landing.jsx
@@ -12,6 +12,11 @@ import {
} from 'lucide-react';
import { Link } from 'react-router-dom';
+import Char1 from '../assets/char-1.avif';
+import Char2 from '../assets/char-2.avif';
+
+import heroIllustration from '../assets/hero-illustration.svg';
+
const reviews = [
{
name: 'Shamma',
@@ -19,7 +24,7 @@ const reviews = [
skill: 'Guitar',
review:
'Thanks to SkillSwap, I learned to play guitar while teaching photography. It is amazing how much you can grow by helping others!',
- image: '/src/assets/char-1.avif',
+ image: Char1,
},
{
name: 'Tim',
@@ -27,7 +32,7 @@ const reviews = [
skill: 'Graphic Design',
review:
'Thanks to SkillSwap, I learned how to code while teaching graphic design. It is amazing how much you can grow by helping others!',
- image: '/src/assets/char-2.avif',
+ image: Char2,
},
];
@@ -67,7 +72,7 @@ export default function LandingPage() {
</div>
<div className='relative lg:order-last'>
<img
- src='/src/assets/hero-illustration.svg'
+ src={heroIllustration}
alt='Skills exchange illustration'
width={600}
height={600}
--
GitLab