我有我的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>
错误消失但没有响应，图像失真
经过一段时间的搜索，我发现在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;
}