beginner: give image path via prop in custom component

[elder veldt]

So I have a button component which should create a image and a button and tried to pass a prop to src to change the image on each use.
But it throws an error saying:
Type 'string | undefined' is not assignable to type 'string | StaticImport'. Type 'undefined' is not assignable to type 'string | StaticImport'.

Here's my code:

`import { ActionButtonProps } from "@/types";
import Image from "next/image";

const ActionButton = ({
buttonText,
customImageStyle
srcImage,
}: ActionButtonProps) => {
return (
<div className="lg:my-auto">
<button className="flex flex-row py-3 lg:py-0 lg:mx-8">
<Image
src={srcImage}
alt="download icon"
width={25}
height={10}
className={lg:my-auto ${customImageStyle}}
/>
<span className="text-left ml-3 lg:my-auto">{buttonText}</span>
</button>
</div>
);
};

export default ActionButton;`

srcImageis type string in ActionButtonprops

How do I solve this?

[junior quest]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[remote wharf]

@elder veldt Try the following:
<Image
src={srcImage as string}
...
/>

[elder veldt]

oh wow. That was easy. Thank you very much.
But how does it exactly work?
you're parsing srcImage to string even tho I have alredy defined in the ActionButtonProps it should be of type string - why is this double thing needed here?

[remote wharf]

I imagine that in the ActionButtonProps, the srcImage is set with ? which makes it optional. In this line of words when something is optional it is either the type you've said it will be or undefined

And the Image component (src prop) needs a defined value, so it will not like it when you pass an optional value thus the second parsing reassuring it that this is 100% string

@elder veldt

[junior quest]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1179073152161157130 message)

[elder veldt]

Thanks for the solution and for explaining