a1e255e816
Some checks failed
CI/CD Pipeline / Discord Notification (Failure) (push) Blocked by required conditions
CI/CD Pipeline / Integration Tests (push) Blocked by required conditions
CI/CD Pipeline / Deployment Summary (push) Blocked by required conditions
CI/CD Pipeline / Deploy to Portainer (push) Blocked by required conditions
CI/CD Pipeline / Discord Notification (Success) (push) Blocked by required conditions
CI/CD Pipeline / Backend - Build, Test & Push (push) Failing after 1m20s
CI/CD Pipeline / Frontend - Build, Test & Push (push) Has been cancelled
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
export default function TestImagePage() {
|
|
return (
|
|
<div className="min-h-screen p-8">
|
|
<h1 className="text-2xl font-bold mb-4">Test Background Image</h1>
|
|
|
|
{/* Test 1: Direct img tag */}
|
|
<div className="mb-8">
|
|
<h2 className="font-semibold mb-2">Test 1: Direct Image component</h2>
|
|
<Image
|
|
src="/assets/images/background-section-1-landingpage.png"
|
|
alt="test"
|
|
width={256}
|
|
height={128}
|
|
className="w-64 h-32 object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Test 2: CSS background-image */}
|
|
<div className="mb-8">
|
|
<h2 className="font-semibold mb-2">Test 2: CSS background-image</h2>
|
|
<div
|
|
className="w-64 h-32"
|
|
style={{
|
|
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Test 3: Absolute positioning */}
|
|
<div className="mb-8">
|
|
<h2 className="font-semibold mb-2">Test 3: Absolute positioning (like hero section)</h2>
|
|
<div className="relative w-64 h-32 bg-gray-200">
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|