笔试题
该仓库下的 task.md 是识图出来的文本
我提交了仓库内的两个文件给对方，src\app\components\Avatar.tsx 和 next.config.mjs （代码贴在最后了），收到的回复是
Hi,
Thank you for taking the time to participate in our recruitment process and for submitting your code.
We’ve carefully reviewed your submission. While we appreciate the effort and many aspects of your implementation, the task—especially the optimization portion—did not meet the standard required for this position.
Thank you again for your time and interest. We wish you every success in your job search and your future endeavors.
Warm regards,
src\app\components\Avatar.tsx
'use client';
import Image from 'next/image';
import React from 'react';
// Avatar component props interface as specified in the task
type AvatarProps = {
src?: string;
alt: string;
priority?: boolean;
size?: number;
};
export default function Avatar({
src,
alt,
priority = false,
size = 48
}: AvatarProps) {
// Use default avatar if no src is provided
const imageSrc = src || '/avatar.png';
// Only use placeholder for images larger than 40px to avoid performance warnings
const shouldUsePlaceholder = size > 40;
return (
[I]
);
}
/*
* Optimization Notes:
*
* How [I] from next/image optimizes performance:
*
* 1. Automatic Image Optimization:
* - Automatically resizes images to the specified width/height
* - Converts images to modern formats (WebP/AVIF) when supported by the browser
* - Reduces file size while maintaining quality
*
* 2. Lazy Loading and Blur Placeholders:
* - Supports lazy loading for images below the fold (when priority=false)
* - Blur-up placeholders provide smooth UX during image loading (only for images > 40px)
* - Prevents layout shift with proper width/height attributes
*
* 3. Cumulative Layout Shift (CLS) Prevention:
* - Enforces explicit width and height to prevent layout shifts
* - Uses object-cover to maintain aspect ratio while filling the container
* - Responsive design with proper sizing
*
* 4. Development vs Production Behavior:
* - In development: Shows full-size images for easier debugging
* - In production: Applies all optimizations including format conversion and resizing
* - Blur placeholders work in both environments
*
* 5. Accessibility Features:
* - Always includes alt text for screen readers
* - Uses role="img" and aria-label for better accessibility
* - Proper semantic structure for assistive technologies
*
* 6. Security and Performance:
* - Only loads images from configured remotePatterns in next.config.mjs
* - Prevents arbitrary domain loading for security
* - Optimized loading strategies based on priority prop
* - Conditional placeholder usage to avoid performance warnings
*/
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
// Using remotePatterns instead of domains for better security and flexibility
// remotePatterns is preferred because:
// 1. More secure: Allows specific protocols, hostnames, ports, and pathnames
// 2. More flexible: Can restrict to specific paths and protocols
// 3. Better performance: More granular control over which images are optimized
// 4. Future-proof: Recommended approach in modern Next.js
remotePatterns: [
{
protocol: "https",
hostname: "example-bucket.s3.amazonaws.com",
port: "",
pathname: "/images/**",
},
{
protocol: "https",
hostname: "cdn.myapp.com",
port: "",
pathname: "/**",
},
],
}
};
export default nextConfig;
