I've created a wrapper called IllustrationWrapper that I'm utilizing in different components.
import Image, { ImageProps } from 'next/image';
const getImageUrl = (illustrationName: string) => {
return `https://my-link.com/illustrations/${illustrationName}.svg`;
};
interface IllustrationProps extends ImageProps {
illustrationName: string;
}
const IllustrationWrapper = ({ illustrationName, ...props }: IllustrationProps) => {
const imageUrl = getImageUrl(illustrationName);
const altText = imageUrl.split(/(?=[A-Z])/).join(' ');
return <Image {...props} src={imageUrl} alt={altText} unoptimized />;
};
export default IllustrationWrapper;
This wrapper is being used in the following component as an example:
import Link from 'next/link';
import IllustrationWrapper from '~/common/components/IllustrationWrapper';
const DesktopNav = () => (
<div className="flex-shrink basis-[14.125rem]">
<Link href="/" className="inline-block" aria-label="To main site">
<IllustrationWrapper illustrationName="LogoLight" width={80} height={28} />
</Link>
</div>
)
export default DesktopNav;
However, when using it in DesktopNav, I encounter an error saying
Type '{ illustrationName: string; width: number; height: number; }' is missing the following properties from type 'IllustrationProps': src, altIt seems like ImageProps from next is overriding my src and alt attributes in IllustrationWrapper. How can I resolve this?