我的Home
页面通过props
将数据从strapi
CMS发送到PostSlider
组件
import React from "react";
import styles from './index.module.scss'
import { AxiosService } from '../utils/axios-service'
import PostSlider from '../components/postSlider/postSlider'
const Home = ({ posts }) => {
return (
<div id='contentsWrap' className={styles.dohandsWrap}>
<PostSlider home={true} posts={posts} />
</div>
)
}
export default Home
export async function getStaticProps() {
const axios = AxiosService.create()
const res = await axios.get('/archives', {
params: {
category: 'news',
display: true,
showDoson: true,
_limit: 5,
_sort: 'id:DESC'
}
})
return {
props: {
posts: res.data,
},
}
}
然后,postSlider组件Map数据以填充滑块
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styles from './postSlider.module.scss'
import Link from 'next/link'
import Image from 'next/image'
export default function PostSlider({ home, posts }) {
var settings = {
infinite: posts.length > 2 ? true : false,
autoplay: false,
speed: 500,
autoplaySpeed: 3000,
slidesToShow: 3,
slidesToScroll: 1,
};
return (
<section className={`${styles.postSlider} postSlider ${home ? styles.postSliderHome : 'postSliderNotHome'} ${posts.length > 2 ? 'postSliderPadding' : ''}`}>
<Slider {...settings}>
{posts.map((post) => {
const date = new Date(post.displayDate);
return (
<Link key={post.id} href={`/news/${post.id}`}>
<a className={styles.postSliderLink}>
<article>
<Image src={post.images[0]?.url} alt={post.images[0]?.alternativeText} width={376} height={190} layout="fixed" />
</article>
</a>
</Link>
)
})}
</Slider>
</section>
);
}
我确保在module.exports
中包含我的cdn地址在next.config.js
中,但我得到以下错误
错误:图像缺少必需的“src”属性。确保将props中的“src”传递给next/image
组件。收到:{“width”:376,“height”:190}
如果我删除了普通img
标签的next/image
组件,一切正常。
我做错了什么?
4条答案
按热度按时间yks3o0rb1#
好吧,看起来你的一篇文章有空的
images
数组?Image
组件必须具有src
属性,而您传递undefined
。您可以检查是否至少有一个图像,然后渲染它,就像这样:
jckbn6z72#
在返回之前尝试:
然后在返回中:
relj7zay3#
有时候,
<Image />
标签不能正常工作,也不接受***src***。尝试在返回之前定义URL,然后在*src属性中传递URL。返回前:
然后你可以添加:
twh00eeo4#
在我的情况下,给图像条件解决了问题