下一个/图像不使用道具作为图像源

Question

我的home页面通过postslider通过props我的postslider组件将数据发送到我的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,
    },
  }
}

。填充我的滑块的数据，

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 in next.config.js中包含我的cdn地址，但我会收到以下错误

错误：缺少图像“ SRC”属性。确保您通过 “ SRC”在next/image组件的道具中。已收到： {“宽度”：376，“高度”：190}

如果我删除Next/image正常img标签的组件，一切正常。

我在做什么错？

Answer 1

在返回前尝试：

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

然后在返回中：

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

Answer 2

有时，＆lt; image/＆gt;标记不像应该这样做，也不接受 src 。尝试在返回之前定义URL，然后在 src 属性中传递URL。

返回之前：

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

然后您可以添加：

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

Answer 3

好吧，您的一篇文章似乎有一个空的图像数组？

图像需要组件具有src属性，然后您将不确定的而不是。

您可以检查至少有一张图像，然后将其呈现，这样：

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

Answer 4

在我的情况下，给图像凝结解决了问题

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