#nextImage events dont work at all on dynamic routes

9 messages · Page 1 of 1 (latest)

reef salmon
#

Im trying to implement onError logic to my Images but when i implement it on dynamic routes it doesnt work at all.

    const { src, fallbackSrc, ...rest } = props
    const [imgSrc, setImgSrc] = useState(src)

    return (
        <Image
            {...rest}
            src={imgSrc}
            onError={() => {
                console.log("ImageWithFallback: onError: imgSrc: ", imgSrc)
                setImgSrc(fallbackSrc)
            }}
        />
    )
}

export default ImageWithFallback

it doesnt console.log anything even though it errors

anyone has any idea why its not firing?

urban warren
# reef salmon Im trying to implement onError logic to my Images but when i implement it on dyn...

this file works whether it is named pages/test.tsx or pages/[slug].tsx. There is an error printed on the terminal, but that's to be expected. The console.log works properly and the fallback is displayed as normal

import Image from "next/image";
import { useState } from "react";

function ImageWithFallback(props: React.ComponentProps<typeof Image> & { fallbackSrc: string }) {
  const { src, fallbackSrc, alt, ...rest } = props;
  const [imgSrc, setImgSrc] = useState(src);

  return (
    <Image
      {...rest}
      alt={alt}
      src={imgSrc}
      onError={() => {
        console.log("ImageWithFallback: onError: imgSrc: ", imgSrc);
        setImgSrc(fallbackSrc);
      }}
    />
  );
}

export default function Test() {
  return (
    <div>
      <ImageWithFallback
        src="https://nextjs.org"
        fallbackSrc="https://nextjs.org/_next/static/media/learn.a192afe1.png"
        alt="Next.js"
        width={500}
        height={500}
      />
    </div>
  );
}
reef salmon
#

I tried again with your code:

//ImageWithFallback.tsx
import Image from "next/image"
import React from "react"
import { useState } from "react"

function ImageWithFallback(
    props: React.ComponentProps<typeof Image> & { fallbackSrc: string }
) {
    const { src, fallbackSrc, alt, ...rest } = props
    const [imgSrc, setImgSrc] = useState(src)

    return (
        <Image
            {...rest}
            alt={alt}
            src={imgSrc}
            onError={() => {
                console.log("2222jksdhgdjk", imgSrc)
                setImgSrc(fallbackSrc)
            }}
        />
    )
}

export default ImageWithFallback

and im using this component here: /pages/shop/[pid].js

{images
  .filter((image, index) => {
    if (image) return image
  })
  .map((image, index) => (
    <ImageWithFallback
className="relative w-28 h-28 border-gray-300 rounded-lg border"
src={image}
key={index}
layout="fill"
fallbackSrc="https://nextcloud.uebler.com:444/apps/files_sharing/publicpreview/Wp8jjoA4NRPspor?file=/uebler/Bilder/Image/i41%20S%2BFZG_unterwegs_2_B.jpg&fileId=143678&x=1920&y=1080&a=true"
objectFit="contain"></ImageWithFallback>
    ))}
#

still no console.log

#

this is how it looks

#

clearly error happens but the event doesnt go off / no console.log

reef salmon
#

omg i just figured it out and i made a stupid mistake... i have multiple divs for different product types and i changed the image component for the wrong product type.. appreciate you leading me on the right path

urban warren