javascript - Don't display nextimage component when the image doesn't exist - Stack Overflow

admin管理员组

文章数量:1290984

I'm using next/image and I want the image to not render at all when the path to the image is invalid, eg. the image doesn't exist. Now it displays the little icon and alt name. I don't want to display anything in that case. Is that possible? Since it's frontend I can't use fs to check, so I'm not sure what to do

      <Image
         src={`/scroll-${router.locale}.svg`}
         alt="scroll"
         width="240px"
         height="240px"
         className="opacity-50"
       />

I'm using next/image and I want the image to not render at all when the path to the image is invalid, eg. the image doesn't exist. Now it displays the little icon and alt name. I don't want to display anything in that case. Is that possible? Since it's frontend I can't use fs to check, so I'm not sure what to do

      <Image
         src={`/scroll-${router.locale}.svg`}
         alt="scroll"
         width="240px"
         height="240px"
         className="opacity-50"
       />

• javascript
• reactjs
• next.js
• nextjs-image

Share Improve this question Follow edited Feb 20, 2022 at 0:17 juliomalves 50.4k2323 gold badges177177 silver badges168168 bronze badges asked Oct 12, 2021 at 9:51 FilipFilip 94566 gold badges2020 silver badges4343 bronze badges 2

• Does this answer your question? How to check if a pariticular fileExists in reactjs – Sinan Yaman Commented Oct 12, 2021 at 10:30
• 1 You need to look inside the ponent to see if it's looking for onerror - if it is you can use something like onerror="this.style.display='none'" – StudioTime Commented Oct 12, 2021 at 11:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can extend the built-in next/image and add an onError handler to not render the ponent if the image fails to load.

import React, { useState } from 'react';
import Image from 'next/image';

const ImageWithHideOnError = (props) => {
    const [hideImage, setHideImage] = useState(false);

    return (
        !hideImage && (
            <Image
               {...props}
               onError={() => {
                   setHideImage(true);
               }}
            />
        )
    );
};

export default ImageWithHideOnError;

You can then use the ponent instead of the next/image.

<ImageWithHideOnError
    src={`/scroll-${router.locale}.svg`}
    alt="scroll"
    width="240px"
    height="240px"
    className="opacity-50"
/>

Placeholder solution. I know... This is not correct answer for you, but for someone else helps with placeholder solution.

'use client';

import type { FC } from 'react';
import { useState } from 'react';

import Image from 'next/image';
import type { ImageProps } from 'next/image';
import fallbackImgSrc from '/public/img/placeholders/star-wars.webp';

type ImageWithFallbackProps = ImageProps & {
  fallbackSrc?: string;
};

export const ImageWithFallback: FC<ImageWithFallbackProps> = ({
  fallbackSrc = fallbackImgSrc,
  ...props
}) => {
  const [error, setError] = useState(false);
  return (
    <Image
      {...props}
      src={error ? fallbackSrc : props.src}
      onError={() => {
        return setError(true);
      }}
    />
  );
};

本文标签： javascriptDon39t display nextimage component when the image doesn39t existStack Overflow