95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
// Image utility functions
|
|
import { API_BASE_URL } from './config/api';
|
|
|
|
export const FALLBACK_IMAGES = {
|
|
BLOG: '/images/blog/blog-poster.png',
|
|
CASE_STUDY: '/images/case/poster.png',
|
|
SERVICE: '/images/service/thumb-one.png',
|
|
GALLERY: '/images/masonry/one.png',
|
|
BANNER: '/images/banner/banner-bg.png',
|
|
DEFAULT: '/images/logo.png'
|
|
};
|
|
|
|
/**
|
|
* Get the correct image URL for the current environment
|
|
*
|
|
* During build: Use internal backend URL so Next.js can fetch images
|
|
* During runtime (client): Use relative URLs (nginx serves media files)
|
|
* During runtime (server/SSR): Use relative URLs (nginx serves media files)
|
|
* In development: Use API_BASE_URL (which points to backend)
|
|
*/
|
|
function getImageBaseUrl(): string {
|
|
const isServer = typeof window === 'undefined';
|
|
const isProduction = process.env.NODE_ENV === 'production';
|
|
|
|
// Check if we're in build phase (Next.js build context)
|
|
const isBuildTime =
|
|
!process.env.NEXT_RUNTIME || // Not set during build
|
|
process.env.NEXT_PHASE === 'phase-production-build' ||
|
|
process.env.NEXT_PHASE === 'phase-production-compile';
|
|
|
|
// During build time in production: use internal backend URL
|
|
// This allows Next.js to fetch images during static generation
|
|
if (isProduction && isBuildTime && isServer) {
|
|
return process.env.INTERNAL_API_URL || 'http://127.0.0.1:1086';
|
|
}
|
|
|
|
// Runtime (both client and server): use relative URLs
|
|
// Nginx will serve /media/ files directly
|
|
if (isProduction) {
|
|
return '';
|
|
}
|
|
|
|
// Development: use API_BASE_URL (which points to backend)
|
|
return API_BASE_URL;
|
|
}
|
|
|
|
export function getValidImageUrl(imageUrl?: string, fallback?: string): string {
|
|
if (!imageUrl || imageUrl.trim() === '') {
|
|
return fallback || FALLBACK_IMAGES.DEFAULT;
|
|
}
|
|
|
|
// If it's already a full URL, return as is
|
|
if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
|
|
return imageUrl;
|
|
}
|
|
|
|
// Get the base URL for images (handles client/server differences)
|
|
const baseUrl = getImageBaseUrl();
|
|
|
|
// If it starts with /media/, it's a Django media file
|
|
if (imageUrl.startsWith('/media/')) {
|
|
// In production client-side, baseUrl is empty, so this becomes /media/... (correct)
|
|
// In production server-side, baseUrl is the domain, so this becomes https://domain.com/media/... (correct)
|
|
return `${baseUrl}${imageUrl}`;
|
|
}
|
|
|
|
// If it starts with /images/, it's a local public file (always relative)
|
|
if (imageUrl.startsWith('/images/')) {
|
|
return imageUrl;
|
|
}
|
|
|
|
// If it starts with /, check if it's a media file
|
|
if (imageUrl.startsWith('/')) {
|
|
// If it contains /media/, prepend base URL
|
|
if (imageUrl.includes('/media/')) {
|
|
return `${baseUrl}${imageUrl}`;
|
|
}
|
|
// Other absolute paths (like /static/) are served directly
|
|
return imageUrl;
|
|
}
|
|
|
|
// Otherwise, assume it's a public path and add /
|
|
return `/${imageUrl}`;
|
|
}
|
|
|
|
// Alias for backward compatibility
|
|
export const getImageUrl = getValidImageUrl;
|
|
|
|
export function getImageAlt(title?: string, fallback: string = 'Image'): string {
|
|
return title ? `${title} - Image` : fallback;
|
|
}
|
|
|
|
// Export getValidImageAlt as an alias for getImageAlt for backward compatibility
|
|
export const getValidImageAlt = getImageAlt;
|