Barazo default frontend
barazo.forum
refactor(web): replace raw img elements with next/image (#78)
- Use next/image Image component with fill prop in user-menu,
image-upload, and user-profile-card
- Add relative positioning to parent containers for fill layout
- Remove eslint-disable comments for @next/next/no-img-element
- Remote patterns already configured in next.config.ts
authored by
Guido X Jansen
and committed by
GitHub
00d5ad8f
b3eff4c9
+8
-8
+2
-2
src/components/image-upload.tsx
+2
-2
src/components/image-upload.tsx
···
8
8
'use client'
9
9
10
10
import { useRef, useState, useCallback } from 'react'
11
+
import Image from 'next/image'
11
12
import { cn } from '@/lib/utils'
12
13
import { UploadSimple, TrashSimple, User, Image as ImageIcon } from '@phosphor-icons/react'
13
14
···
99
100
style={{ aspectRatio }}
100
101
>
101
102
{currentUrl ? (
102
-
// eslint-disable-next-line @next/next/no-img-element
103
-
<img src={currentUrl} alt={label} className="h-full w-full object-cover" />
103
+
<Image src={currentUrl} alt={label} fill className="object-cover" />
104
104
) : (
105
105
<div className="flex h-full w-full items-center justify-center text-muted-foreground">
106
106
{isAvatar ? (
+3
-3
src/components/user-profile-card.tsx
+3
-3
src/components/user-profile-card.tsx
···
8
8
9
9
import { useState, useRef, useCallback, useEffect } from 'react'
10
10
import Link from 'next/link'
11
+
import Image from 'next/image'
11
12
import { User, CalendarBlank, ChatCircle } from '@phosphor-icons/react'
12
13
import { cn } from '@/lib/utils'
13
14
import { ReputationBadge } from './reputation-badge'
···
91
92
role="tooltip"
92
93
>
93
94
<div className="flex items-start gap-3">
94
-
<div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
95
+
<div className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
95
96
{user.avatarUrl ? (
96
-
// eslint-disable-next-line @next/next/no-img-element
97
-
<img src={user.avatarUrl} alt="" className="h-full w-full object-cover" />
97
+
<Image src={user.avatarUrl} alt="" fill className="object-cover" />
98
98
) : (
99
99
<User size={20} className="text-muted-foreground" aria-hidden="true" />
100
100
)}