refactor: Update proxy and image components to support uploads
- Modified the proxy function to allow access to the "/uploads" route alongside existing public routes. - Enhanced PhotoImage and PhotoThumbnail components to handle local uploads by treating them similarly to external URLs. - Updated comments to clarify the changes made regarding uploads and public folder handling.
This commit is contained in:
parent
76cd2782ec
commit
7ced408041
@ -5,8 +5,9 @@ import Image from "next/image"
|
|||||||
export default function PhotoImage({ src, alt }: { src: string; alt: string }) {
|
export default function PhotoImage({ src, alt }: { src: string; alt: string }) {
|
||||||
// Handle external URLs and local paths
|
// Handle external URLs and local paths
|
||||||
const isExternal = src.startsWith("http://") || src.startsWith("https://")
|
const isExternal = src.startsWith("http://") || src.startsWith("https://")
|
||||||
|
const isLocalUpload = src.startsWith("/uploads/")
|
||||||
|
|
||||||
if (isExternal) {
|
if (isExternal || isLocalUpload) {
|
||||||
return (
|
return (
|
||||||
/* eslint-disable-next-line @next/next/no-img-element */
|
/* eslint-disable-next-line @next/next/no-img-element */
|
||||||
<img
|
<img
|
||||||
@ -31,7 +32,6 @@ export default function PhotoImage({ src, alt }: { src: string; alt: string }) {
|
|||||||
className="object-contain"
|
className="object-contain"
|
||||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
unoptimized={src.startsWith("/uploads/")}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,10 +5,11 @@ import Image from "next/image"
|
|||||||
export default function PhotoThumbnail({ src, alt }: { src: string; alt: string }) {
|
export default function PhotoThumbnail({ src, alt }: { src: string; alt: string }) {
|
||||||
// Handle external URLs and local paths
|
// Handle external URLs and local paths
|
||||||
const isExternal = src.startsWith("http://") || src.startsWith("https://")
|
const isExternal = src.startsWith("http://") || src.startsWith("https://")
|
||||||
|
const isLocalUpload = src.startsWith("/uploads/")
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-full relative">
|
<div className="w-full h-full relative">
|
||||||
{isExternal ? (
|
{isExternal || isLocalUpload ? (
|
||||||
/* eslint-disable-next-line @next/next/no-img-element */
|
/* eslint-disable-next-line @next/next/no-img-element */
|
||||||
<img
|
<img
|
||||||
src={src}
|
src={src}
|
||||||
@ -28,7 +29,6 @@ export default function PhotoThumbnail({ src, alt }: { src: string; alt: string
|
|||||||
className="object-cover"
|
className="object-cover"
|
||||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
unoptimized={src.startsWith("/uploads/")}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
7
proxy.ts
7
proxy.ts
@ -6,7 +6,7 @@ export async function proxy(request: NextRequest) {
|
|||||||
const pathname = request.nextUrl.pathname
|
const pathname = request.nextUrl.pathname
|
||||||
|
|
||||||
// Public routes - allow access
|
// Public routes - allow access
|
||||||
if (pathname === "/login" || pathname.startsWith("/api/auth")) {
|
if (pathname === "/login" || pathname.startsWith("/api/auth") || pathname.startsWith("/uploads")) {
|
||||||
return NextResponse.next()
|
return NextResponse.next()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,8 +68,9 @@ export const config = {
|
|||||||
* - _next/rsc (RSC payload requests)
|
* - _next/rsc (RSC payload requests)
|
||||||
* - _next/webpack (webpack chunks)
|
* - _next/webpack (webpack chunks)
|
||||||
* - favicon.ico (favicon file)
|
* - favicon.ico (favicon file)
|
||||||
* - public folder
|
* - uploads/ (uploaded files)
|
||||||
|
* - public folder files (images, etc.)
|
||||||
*/
|
*/
|
||||||
"/((?!_next/static|_next/image|_next/rsc|_next/webpack|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
|
"/((?!_next/static|_next/image|_next/rsc|_next/webpack|favicon.ico|uploads|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user