61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
========================================
|
|
✅ FIXED: Image URLs Now Use Network IP
|
|
========================================
|
|
|
|
PROBLEM:
|
|
Images were trying to load from:
|
|
❌ http://localhost:8001/static/uploads/...
|
|
|
|
But backend is running on:
|
|
✅ http://10.0.0.243:8001
|
|
|
|
SOLUTION:
|
|
Updated all image URL references to use API_BASE_URL
|
|
from the .env configuration instead of hardcoded localhost.
|
|
|
|
## FILES UPDATED:
|
|
|
|
✅ frontend/src/api/axios.ts
|
|
- Exported API_BASE_URL constant
|
|
|
|
✅ frontend/src/components/ChoreCard.tsx
|
|
- Chore images use API_BASE_URL
|
|
- User avatars use API_BASE_URL
|
|
|
|
✅ frontend/src/pages/Settings.tsx
|
|
- User avatars use API_BASE_URL
|
|
|
|
✅ frontend/src/components/AvatarUpload.tsx
|
|
- Avatar preview uses API_BASE_URL
|
|
|
|
✅ frontend/src/components/ChoreImageUpload.tsx
|
|
- Image preview uses API_BASE_URL
|
|
|
|
## HOW IT WORKS NOW:
|
|
|
|
The frontend reads from .env file:
|
|
VITE_API_URL=http://10.0.0.243:8001
|
|
|
|
All image URLs now use:
|
|
http://10.0.0.243:8001/static/uploads/users/...
|
|
http://10.0.0.243:8001/static/uploads/chores/...
|
|
|
|
## TO SEE THE FIX:
|
|
|
|
1. Stop frontend (Ctrl+C)
|
|
2. Restart: npm run dev
|
|
3. Refresh browser (Ctrl+Shift+R)
|
|
4. Images should load correctly! 🎉
|
|
|
|
## VERIFY IT WORKS:
|
|
|
|
Test URL (should load image):
|
|
http://10.0.0.243:8001/static/uploads/users/user_1_6ba276ca.png
|
|
|
|
In browser console (F12 → Network tab):
|
|
- Should see requests to 10.0.0.243:8001
|
|
- NOT localhost:8001
|
|
- Image files should show 200 status
|
|
|
|
========================================
|