Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
    )
}

>Solution :

You have a typo here

Before:

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

After:

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading