Image is missing required "src" property when valid src is provided as a prop-CodePudding

I'm having problems in Next.JS with getting a component to accept an image source through a prop. I'm passing the path of an image named "logo.jpg" located in the project's public folder. When passed as a prop for another component, it accepts the image and uses it correctly. When used as a prop for the problem component, it doesn't recognise that the path is even being read.

How can I resolve this problem, so that Next.JS will recognise and use the path of an image fed as a prop?

Error produced by console

Image is missing required "src" property: 
<img alt="" src="data:image/gif;base64,R0…AAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;…ht:100%;max-height:100%">

(Relevant) File Structure

card-page
├───components
│       card.js
│       cardlink.js
├───pages
│       _app.js
│       index.js
└───public
        logo.jpg

Working Component (card.js)

import React from 'react'
import Image from 'next/image'
import styles from '../styles/card.module.css'

export default function Card( {title, image, alt, description} ) {
    console.log(image)
    return(
        <div className={styles.container}>
            <Image
            src={image}
            width="200"
            height="200"
            alt={alt} />
            <h1>{title}</h1>
            <p>{description}</p>
        </div>
    )
}

Broken Component (cardlink.js)

import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/cardlink.module.css'

export default function CardLink( text, image, href ) {
    console.log(image)
    return(
        <div className={styles.container}>
            <Image
            src={image}
            width={64}
            height={64}
            alt="" />
        </div>
    )
}

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/home.module.css'

import CardLink from '../components/cardlink'
import Card from '../components/card'

export default function Home() {
    return (
        <div className={styles.container}>
            <Card
            image="/logo.jpg" />
            <CardLink
            image="/logo.jpg"
            text="Link 1"
            href=""
            alt="what"
            />
        </div>
    )
}

CodePudding user response：

You have a typo here

Before:

export default function CardLink( text, image, href ) {

After:

export default function CardLink({ text, image, href }) {