Image Loading Diagnostic

Step 1: Check if images exist in public folder

These should all load if the files exist:

Home Page Image

Plant head

Path: /images/plant_head.jpg

About Page Image

White hat

Path: /images/whitehat.JPG

Logo Image

Wryver logo

Path: /images/wryver_logo_hero.svg

Media Page Image

Lena headshot

Path: /images/lena-headshot-new.jpg

Step 2: Browser Developer Tools

How to check in browser:

  1. Press F12 (or right-click → Inspect)
  2. Go to "Network" tab
  3. Refresh the page
  4. Look for red entries (failed requests)
  5. Click on failed image requests to see the error

Step 3: Common Issues

  • 404 Not Found: File doesn't exist or wrong path
  • 403 Forbidden: Permission issue
  • Case sensitivity: whitehat.jpg vs whitehat.JPG
  • Build issue: Images not copied to dist folder
  • CDN/Caching: Old cached version

Step 4: Check Build Output

Images should be copied to the dist/images folder during build.

Current Build Info

Site URL:

Current URL:

Base URL: