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)

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

# 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:

{
  "_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:

# 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:

// 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! 🎉