图片不存在时不显示next/image组件

Question

我正在使用 next/image 并且我希望在图像路径无效时完全不渲染图像，例如。该图像不存在。现在它显示小图标和替代名称。在那种情况下我不想显示任何东西。那可能吗？由于它是前端，我无法使用 fs 进行检查，所以我不确定该怎么做

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

Answer 1

您可以扩展内置 next/image 并添加一个 onError 处理程序，以便在图像加载失败时不渲染组件。

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;

然后您可以使用该组件代替 next/image。

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

图片不存在时不显示next/image组件

Don't display next/image component when the image doesn't exist

javascript

reactjs

next.js

nextjs-image