CODEWITHSUNDEEP
reactjsnext.jsstrapinextjs-image
dev_el
dev_el

Reputation: 2957

next/image not working with props as image source

My Home page sends data from my strapi cms to my PostSlider component via 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,
    },
  }
}

My postSlider component then maps over the data to fill my slider

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>
  );
}

I made sure to include my cdn address in module.exports in next.config.js but I get the following error

Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {"width":376,"height":190}

error

If I remove the next/image component for the normal img tag, everything works fine.

What am I doing wrong?

Upvotes: 14

Views: 40818

Answers (4)

Danila
Danila

Reputation: 18546

Well, it seems that one of your posts has an empty images array?

Image component is required to have src property and you pass undefined instead.

You can check if there is at least one image and then render it, like that:

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

Upvotes: 15

Shakil- The Coding monster
Shakil- The Coding monster

Reputation: 1077

In my case giving image conditinally solved the problem

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

Upvotes: 1

Priz Devin
Priz Devin

Reputation: 1

Sometimes, the <Image /> tag doesn't work like it should and doesn't accept the src . Try defining the URL before return and then pass the URL in the src property.

Just before return:

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

And then you can add:

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

Upvotes: 0

misterrodger
misterrodger

Reputation: 225

Try before the return:

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

Then inside the return:

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

Upvotes: 0

Related Questions