next/image无法使用props作为图像源

u0sqgete  于 2023-06-22  发布在  其他
关注(0)|答案(4)|浏览(142)

我的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组件,一切正常。
我做错了什么?

yks3o0rb

yks3o0rb1#

好吧,看起来你的一篇文章有空的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>
jckbn6z7

jckbn6z72#

在返回之前尝试:

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

然后在返回中:

<Image {...src}    //etc...
relj7zay

relj7zay3#

有时候,<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" />
twh00eeo

twh00eeo4#

在我的情况下,给图像条件解决了问题

<Image  src={cartItem?.image ? cartItem.image: "/images/default_product.png" } alt={cartItem.name}  height="40"
            width="120"  />

相关问题