magdo
105 lines
3.2 KiB
Markdown
105 lines
3.2 KiB
Markdown
# Product Images Directory
|
|
|
|
This directory contains product images for the webstore backend.
|
|
|
|
## Image Requirements
|
|
|
|
The following 17 placeholder images are required for the seed data to display properly:
|
|
|
|
**Shoes (4 images)**
|
|
- `street-runner.jpg` - 18,990 HUF
|
|
- `trail-edge.jpg` - 24,990 HUF
|
|
- `urban-sprint.jpg` - 22,990 HUF
|
|
- `classic-comfort.jpg` - 16,990 HUF
|
|
|
|
**Bags (4 images)**
|
|
- `urban-tote.jpg` - 14,990 HUF
|
|
- `backpack-pro.jpg` - 19,990 HUF
|
|
- `crossbody.jpg` - 9,990 HUF
|
|
- `duffle.jpg` - 24,990 HUF
|
|
|
|
**Accessories (4 images)**
|
|
- `classic-cap.jpg` - 6,990 HUF
|
|
- `silk-scarf.jpg` - 12,990 HUF
|
|
- `leather-belt.jpg` - 8,990 HUF
|
|
- `watch-straps.jpg` - 4,990 HUF
|
|
|
|
**Clothing (3 images)**
|
|
- `cotton-tshirt.jpg` - 7,990 HUF
|
|
- `denim-jacket.jpg` - 29,990 HUF
|
|
- `yoga-leggings.jpg` - 11,990 HUF
|
|
|
|
**Electronics (2 images)**
|
|
- `earbuds.jpg` - 17,990 HUF
|
|
- `usb-hub.jpg` - 5,990 HUF
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
images/
|
|
├── [17 product placeholder images]
|
|
├── uploads/ (auto-created by multer)
|
|
│ └── [user-uploaded images]
|
|
├── production.compose.yml (production docker-compose)
|
|
├── .production.env (production environment variables)
|
|
└── run-student-production.bat (production start script)
|
|
```
|
|
|
|
## Image Specifications
|
|
|
|
**Recommended specifications for product images:**
|
|
- Format: JPEG or PNG
|
|
- Dimensions: 400-600px width, 300-600px height
|
|
- File size: < 500KB per image
|
|
- Color space: RGB or RGBA
|
|
|
|
## Uploads Directory
|
|
|
|
The `uploads/` directory is automatically created by the multer middleware when the backend starts. This directory stores images uploaded by users through the frontend.
|
|
|
|
**Important notes:**
|
|
- Images are stored with timestamps: `1717123456789-product-name.jpg`
|
|
- Served via: `GET /images/uploads/{filename}`
|
|
- Max file size: 5MB per upload
|
|
- Only image MIME types allowed
|
|
|
|
## Production Build
|
|
|
|
When building for production with `build-production-images.bat`:
|
|
1. ✓ Placeholder images are automatically generated (if ImageMagick or PowerShell available)
|
|
2. ✓ Seeding runs automatically when containers start
|
|
3. ✓ Upload directory is created on first run
|
|
|
|
## Database Seeding
|
|
|
|
The database automatically seeds with:
|
|
- **5 categories**: Shoes, Bags, Accessories, Clothing, Electronics
|
|
- **16 products**: 2-4 per category with placeholder images
|
|
- **3 test users**: admin@test.com, john@test.com, jane@test.com
|
|
|
|
## Customization
|
|
|
|
To use custom product images:
|
|
|
|
1. **Development**: Replace placeholder images in this directory
|
|
2. **Production**: Include custom images in the `images/` directory before building
|
|
3. **After deployment**: Use the API to upload images via `POST /api/shop/products/{id}/image`
|
|
|
|
## Troubleshooting
|
|
|
|
### Images not displaying in frontend
|
|
- Ensure images are placed in the correct directory
|
|
- Check file names match exactly (case-sensitive on Linux/Mac)
|
|
- Verify `express.static` is configured in `src/Api/app.js`
|
|
- Check console for 404 errors
|
|
|
|
### Upload fails
|
|
- Check file is an image (JPEG, PNG, WebP, GIF, etc.)
|
|
- Verify file size < 5MB
|
|
- Ensure `uploads/` directory exists and is writable
|
|
|
|
### Seeding without images
|
|
- Seed will complete successfully even without images
|
|
- Products will have `null` imageUrl values
|
|
- Frontend can display placeholder or error images
|