7

我的Home页面通过我的strapicms 将数据发送到我的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，一切正常。

我究竟做错了什么？

4

3 回答 3

9

好吧，您的一篇文章似乎有空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>
于 2021-02-10T08:48:50.563 回答
0

退货前试试：

const src = {src: post.images[0]?.url}

然后在返回内部：

<Image {...src}    //etc...
于 2021-05-23T08:00:10.050 回答
0

有时，<Image />标签不能正常工作并且不接受src。尝试在返回之前定义 URL，然后在src属性中传递 URL。

就在返回之前：

const url = post.images[0]?.url;

然后你可以添加：

<Image src={url} alt={post.images[0]?.alternativeText} width={376} height={190} layout="fixed" />

于 2021-07-10T05:23:58.677 回答