我有我的索引.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.
如果我添加填充布局图像没有响应，如果我没有响应，则图像不会显示.
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>
)
}
包裹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"
}
}
如何将图像作为组件props 传递而不出现该错误？
EDIT
我像这样改变了我的标记
<div style={{position: "relative",width: '100px', height: '100px'}}>
<Image src={logo} layout='fill' />
</div>
错误消失了，但没有响应，图像失真