I have a NextJS application where i want to render social logo’s dynamical. Now on my dev server this is working fine, but when i execute the build command the images are not visible anymore?
This is my component:
import { socialProviders } from "@/src/auth";
import Image from "next/image";
import { signInWith } from "../app/actions";
import { useCallback } from "react";
const SocialLoginButtons = () => {
const handleSignIn = useCallback(async (providerName) => {
await signInWith(providerName.toLowerCase());
}, []);
return (
<div className="w-full flex flex-col border-opacity-50">
<div className="divider text-sm">Or</div>
{socialProviders.map((provider) => {
const providerNameLowerCase = provider.name.toLowerCase();
const iconSrc = `/images/${providerNameLowerCase}.png`;
return (
<button
key={provider.name}
onClick={() => handleSignIn(provider.name)}
className="flex items-center justify-center mt-4 border rounded-lg px-6 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 w-full"
>
<Image
src={iconSrc}
width={24}
height={24}
alt={`${provider.name} icon`}
priority={true}
loading="eager"
/>
<span className="ml-2">Continue with {provider.name}</span>
</button>
);
})}
</div>
);
};
export default SocialLoginButtons;
Images are located in the public/images folder.