salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ContentImageCell.tsx

Browse Source
This commit is contained in:
Desktop
2025-11-12 10:50:05 +05:00
parent 1a51e6bc39
commit c41efc5f96
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/common/ContentImageCell.tsx
View File

@@ -97,7 +97,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100 }: Conte
{image.status === 'generated' && ( {image.status === 'generated' && (
<div className="space-y-1"> <div className="space-y-1">
{/* Always show image from image_path if available, otherwise from image_url */} {/* Always load from image_path if available */}
{image.image_path && image.image_path.trim() ? ( {image.image_path && image.image_path.trim() ? (
<> <>
<img <img
@@ -105,13 +105,12 @@ export default function ContentImageCell({ image, maxPromptLength = 100 }: Conte
alt={prompt || 'Generated image'} alt={prompt || 'Generated image'}
className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600" className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600"
onError={(e) => { onError={(e) => {
// Fallback to original URL if local image fails // Show error placeholder if local image fails (no fallback to image_url)
const target = e.target as HTMLImageElement; const target = e.target as HTMLImageElement;
if (image.image_url) { target.style.display = 'none';
target.src = image.image_url; const parent = target.parentElement;
} else { if (parent) {
target.style.display = 'none'; parent.innerHTML = `
target.parentElement!.innerHTML = `
<div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center"> <div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
<p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p> <p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p>
</div> </div>
@@ -119,6 +118,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100 }: Conte
} }
}} }}
/> />
{/* Always show "View Original" button if image_url is available */}
{image.image_url && ( {image.image_url && (
<a <a
href={image.image_url} href={image.image_url}
@@ -131,6 +131,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100 }: Conte
)} )}
</> </>
) : image.image_url ? ( ) : image.image_url ? (
// Fallback: if no image_path, show image_url (for backward compatibility)
<a <a
href={image.image_url} href={image.image_url}
target="_blank" target="_blank"
@@ -145,17 +146,20 @@ export default function ContentImageCell({ image, maxPromptLength = 100 }: Conte
// Fallback to placeholder if image fails to load // Fallback to placeholder if image fails to load
const target = e.target as HTMLImageElement; const target = e.target as HTMLImageElement;
target.style.display = 'none'; target.style.display = 'none';
target.parentElement!.innerHTML = ` const parent = target.parentElement;
<div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center"> if (parent) {
<p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p> parent.innerHTML = `
</div> <div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
`; <p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p>
</div>
`;
}
}} }}
/> />
</a> </a>
) : ( ) : (
<div className="w-full h-24 bg-yellow-100 dark:bg-yellow-900/20 rounded border border-yellow-300 dark:border-yellow-700 flex items-center justify-center"> <div className="w-full h-24 bg-yellow-100 dark:bg-yellow-900/20 rounded border border-yellow-300 dark:border-yellow-700 flex items-center justify-center">
<p className="text-xs text-yellow-700 dark:text-yellow-400">No URL available</p> <p className="text-xs text-yellow-700 dark:text-yellow-400">No image available</p>
</div> </div>
)} )}
</div> </div>