Enable noImgElement biome rule for @liam-hq/app package

[FunamaYukina]

Overview

The noImgElement biome rule needs to be enabled for the @liam-hq/app package to improve performance by replacing <img> elements with Next.js <Image> component for automatic optimization. After enabling this rule, lint errors have been detected that need to be fixed.

Steps to Enable the Rule

1. Update frontend/apps/app/biome.jsonc with the following configuration:

{
  "extends": "//",
  "root": false,
  "linter": {
    "rules": {
      "performance": {
        "noImgElement": "error"
      }
    }
  }
}

This overrides the base configuration in frontend/internal-packages/configs/biome.jsonc where noImgElement is set to "off".

2. Run lint to see the errors:

cd frontend/apps/app && pnpm lint:biome

Lint Errors to Fix

After enabling the rule, noImgElement errors appear in the following file:

• features/sessions/components/shared/AttachmentPreview/AttachmentPreview.tsx

These violations can lead to:

• Slower LCP (Largest Contentful Paint) scores
• Higher bandwidth usage
• Missing automatic image optimization
• Poor performance on slow networks

Root Cause

The component contains <img> elements that should be replaced with Next.js <Image> component for automatic optimization including:

• Automatic image resizing
• Modern image format serving (WebP, AVIF)
• Lazy loading by default
• Priority loading for above-the-fold images

Required Fix Patterns

Replace <img> with Next.js <Image>

// Before
<img src={src} alt={alt} className={styles.image} />

// After
import Image from 'next/image'
<Image src={src} alt={alt} className={styles.image} width={width} height={height} />

Note: Next.js <Image> requires explicit width and height props for optimization.

Action Items

• Enable the noImgElement: "error" rule in frontend/apps/app/biome.jsonc
• Run pnpm lint:biome to identify all <img> element violations
• Replace <img> elements with Next.js <Image> component in:
  • features/sessions/components/shared/AttachmentPreview/AttachmentPreview.tsx
• Add appropriate width and height props for image optimization
• Run pnpm lint to verify all errors are resolved
• Test affected components to ensure images display correctly
• Verify performance improvements with the optimized images

Testing

After implementing all fixes:

1. All lint errors should be resolved
2. Images should display correctly with proper styling
3. Next.js automatic optimizations should be applied
4. No layout shifts should occur during image loading
5. Performance should be improved with optimized image delivery

Related

• Issue Enable noImgElement biome rule for @liam-hq/ui package #3419 - Similar fix for ui package
• Issue Enable noImgElement biome rule for @liam-hq/erd-core package #3420 - Similar fix for erd-core package
• Part of the broader effort to enforce noImgElement across all packages for better performance

[liam-claude-code-action-bot]

Claude finished @FunamaYukina's task —— View job

---

I'll analyze this and get back to you.

[liam-claude-code-action-bot]

⚠️ No branch found for issue #3418. Please check if Claude Code Action completed successfully.