|
|
@@ -41,54 +41,6 @@
|
|
|
#### Unsplash 占位图使用
|
|
|
- **默认占位图**:使用 Unsplash 提供的免费高质量图片
|
|
|
- **图片尺寸**:根据组件需求选择合适的尺寸
|
|
|
-- **格式**:`https://source.unsplash.com/{width}x{height}/?{关键词}`
|
|
|
-
|
|
|
-#### 使用示例
|
|
|
-- **头像占位图**:`https://source.unsplash.com/200x200/?portrait`
|
|
|
-- **封面占位图**:`https://source.unsplash.com/400x300/?nature`
|
|
|
-- **背景占位图**:`https://source.unsplash.com/800x600/?landscape`
|
|
|
-- **商品图片**:`https://source.unsplash.com/300x300/?product`
|
|
|
-
|
|
|
-#### 关键词分类
|
|
|
-- **人物**:portrait, person, people, man, woman
|
|
|
-- **自然**:nature, landscape, mountain, forest, ocean
|
|
|
-- **城市**:city, building, architecture, street
|
|
|
-- **抽象**:abstract, pattern, texture, gradient
|
|
|
-- **技术**:technology, computer, phone, digital
|
|
|
-- **食物**:food, coffee, fruit, restaurant
|
|
|
-- **商业**:business, office, workspace, meeting
|
|
|
-
|
|
|
-#### 实现代码示例
|
|
|
-```typescript
|
|
|
-// 头像组件
|
|
|
-const AvatarPlaceholder = ({ size = 200 }) => {
|
|
|
- const placeholderUrl = `https://source.unsplash.com/${size}x${size}/?portrait`;
|
|
|
- return <Image src={placeholderUrl} mode="aspectFill" />;
|
|
|
-};
|
|
|
-
|
|
|
-// 封面组件
|
|
|
-const CoverPlaceholder = ({ width = 400, height = 300, keyword = 'nature' }) => {
|
|
|
- const placeholderUrl = `https://source.unsplash.com/${width}x${height}/?${keyword}`;
|
|
|
- return <Image src={placeholderUrl} mode="aspectFill" />;
|
|
|
-};
|
|
|
-
|
|
|
-// 带错误处理的占位图
|
|
|
-const SmartImage = ({ src, placeholder, ...props }) => {
|
|
|
- const [imageSrc, setImageSrc] = useState(src || placeholder);
|
|
|
-
|
|
|
- const handleError = () => {
|
|
|
- setImageSrc(placeholder);
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <Image
|
|
|
- src={imageSrc}
|
|
|
- onError={handleError}
|
|
|
- {...props}
|
|
|
- />
|
|
|
- );
|
|
|
-};
|
|
|
-```
|
|
|
|
|
|
### 2.3 字体规范
|
|
|
|