reactjs - 下一个/图像不使用道具作为图像源
问题描述
我的Home
页面通过我的strapi
cms 将数据发送到我的PostSlider
组件props
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 组件映射数据以填充我的滑块
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>
);
}
我确保在其中包含我的 CDN 地址,module.exports
但next.config.js
出现以下错误
错误:图像缺少必需的“src”属性。确保将 props 中的“src”传递给
next/image
组件。收到:{“宽度”:376,“高度”:190}
如果我删除next/image
普通标签的组件img
,一切正常。
我究竟做错了什么?
解决方案
好吧,您的一篇文章似乎有空images
数组?
Image
组件必须具有src
属性,而您则通过undefined
。
您可以检查是否至少有一张图像,然后渲染它,如下所示:
<article>
{post.images.length > 0 && (
<Image src={post.images[0].url} alt={post.images[0].alternativeText} width={376} height={190} layout="fixed" />
)}
</article>
推荐阅读
- python - 是否有任何解决方案可以在 selenium Python 和使用 chromedriver 的无头浏览器中捕获具有不同 URL 的屏幕截图?
- javascript - event.stopPropagation() 在 react 17.0.1 中没有按预期工作?
- amazon-web-services - 当 IAM 用户在多个组中时,如何协调权限?
- android - 无法在 Flutter 中集成 Google 移动广告
- asp.net-core - PageModel(razor pages) 是如何处理的?
- python - 如何使用对话处理程序在 Python 中获取用户输入(python-telegram-bot)
- gif - 保存 GIF 并保留路径 - 有可能吗?
- javascript - 即使关闭,音频也会自动播放
- c - 将数据添加到文件 C 中的行尾(不使用第二个文件)
- java - 我想使用 DateTimeFormatterBuilder () 将日期从 String 转换为 LocalDateTime