nextjs - 将图像作为道具传递给 next/image

Question

我的index.js如下

import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import Homecard from '../components/homecard'
import logo from '../public/images/logo.jpg'

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <div className='d-flex'>
        <Homecard img={logo} />
      </div>

    </Layout>
  )
}

这是我的 Homecard 组件

import styles from '../styles/homecard.module.css'
import Image from 'next/image'

export default function Homecard({ img }) {

    return (
        <div style={{width: '33.33%'}}>
            <Image src={img} />
        </div>
    )
}

我收到这个错误

Error: Image with src "/images/logo.jpg" must use "width" and "height" properties or "layout='fill'" property.

如果我添加填充布局图像没有响应，如果我不添加图像不显示。如果我像这样更改我的 Homecard 组件，它会起作用。

import styles from '../styles/homecard.module.css'
import Image from 'next/image'
import logo from '../public/images/logo.jpg'

export default function Homecard({ img }) {

    return (
        <div style={{width: '33.33%'}}>
            <Image src={logo} />
        </div>
    )
}

package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "date-fns": "^2.28.0",
    "gray-matter": "^4.0.3",
    "next": "latest",
    "normalize.css": "^8.0.1",
    "prop-types": "^15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1"
  }
}

如何在没有错误的情况下将图像作为组件道具传递？

编辑

我像这样更改了我的标记

<div style={{position: "relative",width: '100px', height: '100px'}}>
    <Image src={logo} layout='fill' />
</div>

错误消失但没有响应，图像失真

Answer 1

如果你想要图像自动宽度，检查这个代码

<div style={{position: "relative" , width: "33%" , height: 200}}>
  <Image src={logo} layout="fill" />
</div>

如果您想要自动响应，请检查此代码

<div>
  <Image src={logo} layout="responsive" whidth={50} height={50} />
</div>

Answer 2

经过一段时间的搜索后，我发现在 nextjs github 页面上有讨论，看来我不是唯一遇到此问题的人

{/* https://github.com/vercel/next.js/discussions/18739#discussioncomment-344932 */}
<div className={styles.imageContainer}>
    <Image src={logo} layout='fill' className={styles.image}/>                    
</div>

.imageContainer {
    width: 100%;
}

.imageContainer>span { /* OR change span to div */
    position: unset !important;
}

.image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
}

nextjs - 将图像作为道具传递给 next/image

nextjs - pass image as props to be used with next/image

javascript

reactjs

next.js