85 lines
3.4 KiB
HTML
85 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Thumbnail Debug Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>Project Thumbnail Debug</h1>
|
|
<div id="output"></div>
|
|
<div id="images"></div>
|
|
|
|
<script>
|
|
async function testThumbnail() {
|
|
const output = document.getElementById('output');
|
|
const images = document.getElementById('images');
|
|
|
|
try {
|
|
// Get auth token from localStorage
|
|
const token = localStorage.getItem('access_token');
|
|
if (!token) {
|
|
output.innerHTML = '<p style="color: red;">No auth token found. Please login first.</p>';
|
|
return;
|
|
}
|
|
|
|
// Fetch projects list
|
|
const response = await fetch('/api/projects/', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
output.innerHTML = `<p style="color: red;">Error fetching projects: ${response.status}</p>`;
|
|
return;
|
|
}
|
|
|
|
const projects = await response.json();
|
|
output.innerHTML = `<p>Found ${projects.length} projects</p>`;
|
|
|
|
// Display each project's thumbnail info
|
|
projects.forEach(project => {
|
|
const div = document.createElement('div');
|
|
div.style.border = '1px solid #ccc';
|
|
div.style.padding = '10px';
|
|
div.style.marginBottom = '10px';
|
|
|
|
div.innerHTML = `
|
|
<h3>Project: ${project.name} (ID: ${project.id})</h3>
|
|
<p>thumbnail_url from API: <code>${project.thumbnail_url || 'null'}</code></p>
|
|
`;
|
|
|
|
if (project.thumbnail_url) {
|
|
// Test different URL formats
|
|
const urls = [
|
|
{ label: 'Direct URL', url: project.thumbnail_url },
|
|
{ label: 'With /api prefix', url: `/api${project.thumbnail_url}` },
|
|
{ label: 'Full URL', url: `http://localhost:8000${project.thumbnail_url}` }
|
|
];
|
|
|
|
urls.forEach(({label, url}) => {
|
|
const imgDiv = document.createElement('div');
|
|
imgDiv.style.marginTop = '10px';
|
|
imgDiv.innerHTML = `
|
|
<p><strong>${label}:</strong> <code>${url}</code></p>
|
|
<img src="${url}" style="max-width: 200px; border: 1px solid #ddd;"
|
|
onerror="this.style.border='2px solid red'; this.alt='Failed to load'"
|
|
onload="this.style.border='2px solid green'">
|
|
`;
|
|
div.appendChild(imgDiv);
|
|
});
|
|
}
|
|
|
|
images.appendChild(div);
|
|
});
|
|
|
|
} catch (error) {
|
|
output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
|
|
}
|
|
}
|
|
|
|
// Run test on page load
|
|
testThumbnail();
|
|
</script>
|
|
</body>
|
|
</html>
|