CODEWITHSUNDEEP
reactjstypescriptnext.js
YourNewEmpire
YourNewEmpire

Reputation: 153

Can I pass react props to the next/image for a component

I want to a card component that uses next's Image component. However, the src prop on Image doesn't accept my props that im passing down.

import React from 'react'
import { Childs } from '../../interfaces/childs'

import Image from 'next/image'

interface CardProps {
      img: string 
      header: string
      body: string
}

export default function Card({ img, header, body }: CardProps): JSX.Element {
      return (
            <div className=" 
            flex items-center justify-center 
            rounded-lg shadow-lg
            bg-blue-200

            ">
                  <div className="w-2/5 ">
                        <Image
                              src={img}
                              alt="Picture of the author"
                              width={"auto"}
                              height={"auto"}
                        />
                  </div>
                  <div className=" grid grid-cols-1 w-3/5 ">
                        <div className="py-4" >
                              {header}
                        </div>
                        <div className="py-4"  >
                              {body}
                        </div>
                  </div>

            </div>
      )
}

Error: Invalid src prop (https://i1.sndcdn.com/avatars-000422928436-y1ke6o-t500x500.jpg) on next/image, hostname "i1.sndcdn.com" is not configured under images in your next.config.js See more info: https://err.sh/next.js/next-image-unconfigured-host

Upvotes: 0

Views: 729

Answers (1)

YourNewEmpire
YourNewEmpire

Reputation: 153

Many thanks to Antoineso

Add root/next.config.js file.

//next.config.js
module.exports = {
      images: {
        domains: ['myimageresources.com'],
      },
    }

Upvotes: 1

Related Questions