SkyArtShop/Sky_Art_shop/IMAGE_FIX_GUIDE.md

# 🔧 Quick Fix: Images Not Showing

## Issue

Products exist in database but `mainImageUrl` is empty, so images don't appear on the website.

## Root Cause

When you created products, either:

1. Images weren't selected during creation
2. Form wasn't set to `multipart/form-data`
3. Upload failed silently

## ✅ Solution: Re-upload Images via Admin

### Step 1: Start Backend (if not running)

```powershell
cd "e:\Documents\Website Projects\Sky_Art_Shop\Admin"
dotnet run --launch-profile https
```

### Step 2: Access Admin & Edit Products

1. Open: <https://localhost:5001/admin/products>
2. Click **Edit** on each product
3. Upload images:
   - **Main Image**: The primary product image
   - **Gallery Images** (optional): Additional photos
4. Click **Save**

The form will:

- Upload images to `wwwroot/uploads/products/`
- Save paths like `/uploads/products/abc123.jpg` to `Images[]`
- `MainImageUrl` will automatically return `Images[0]`

### Step 3: Verify Images Saved

```powershell
# List uploaded files
Get-ChildItem "e:\Documents\Website Projects\Sky_Art_Shop\Admin\wwwroot\uploads\products" -File | Format-Table Name, Length

# Check one product in database
$mongoPath = "C:\Program Files\MongoDB\Server\8.0\bin\mongosh.exe"
& $mongoPath --quiet --eval "use SkyArtShopCMS; db.Products.findOne({}, {name:1, images:1})"
```

You should see:

```json
{
  "_id": "...",
  "name": "Product Name",
  "images": ["/uploads/products/abc123.jpg"]
}
```

### Step 4: Test on Static Site

1. Open: `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/test-api.html`
2. Click **Load Products**
3. Images should now appear with correct URLs

### Step 5: Verify on Real Pages

After integrating the scripts (see `INTEGRATION_GUIDE.md`):

1. Open: `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/shop.html`
2. Products should render with images from API

---

## 🧪 Quick API Test

Test if images are accessible:

```powershell
# Test API endpoint
Invoke-RestMethod -Uri "http://localhost:5000/api/products" | Select-Object -First 1 name, images, mainImageUrl

# Test image file serving
Invoke-WebRequest -Uri "https://localhost:5001/uploads/products/06eec547-d7e8-4d7f-876e-e282a76ae13f.jpg" -Method Head
```

---

## 🎯 Alternative: Seed Sample Product with Image

If you want to quickly test, add this to the seeding section in `Program.cs`:

```csharp
// In InitializeDatabaseAsync, after checking productRepository
var existingProducts = await productRepository.GetAllAsync();
if (!existingProducts.Any())
{
    var sampleProduct = new Product
    {
        Name = "Sky Painting Sample",
        Slug = "sky-painting-sample",
        Description = "Beautiful sky artwork",
        Price = 299.99m,
        Category = "Paintings",
        Images = new List<string> 
        { 
            "/uploads/products/06eec547-d7e8-4d7f-876e-e282a76ae13f.jpg"
        }
    };
    await productRepository.CreateAsync(sampleProduct);
    Console.WriteLine("Seeded sample product with image");
}
```

Then restart backend. The sample product will have an image path.

---

## ✅ Checklist

- [ ] Backend running on <https://localhost:5001>
- [ ] Products have images uploaded via Admin edit
- [ ] Image files exist in `wwwroot/uploads/products/`
- [ ] API returns products with `mainImageUrl` or `images[]` populated
- [ ] `test-api.html` shows images correctly
- [ ] Static pages (shop.html) render images from API

Once all checked, your CMS-powered static site is fully working! 🎉