在 next.js 中为 Image src 设置默认值答案

【问题标题】：Set a default value for Image src in next.js在 next.js 中为 Image src 设置默认值
【发布时间】：2022-06-13 06:09:22
【问题描述】：

我正在尝试在 next.js 的 Image 组件中为图像 src 设置默认值。我找不到任何选项来执行此操作，以防服务器响应状态码为 400。正确地，我正在输入控制台文本，例如：

The requested resource isn't a valid image for <url for invalid image here> received inode/x-empty

如果找不到请求的图像，我想返回默认图像。提前感谢！

我尝试构建一个类似的组件：

const CustomImage = ({
                         src = placeholder,
                         alt = "alt",
                         size = "125px",
                         cycle = false
                     }) => {
    return <Image
        src={src}
        width={size}
        height={size}
        alt={alt}
        quality={"100"}
        layout={"fixed"}
        style={{
            borderRadius:
                cycle ? "50%" : ".15em"
        }}
    />
}

它没有帮助。

编辑：经过大量搜索，我有一个组件可以处理所有情况，但是当我收到 404 错误时，它仍然显示损坏的图像。

const CustomImage = ({
                         src = placeholder,
                         alt = "alt",
                     }) => {

    const [imageError, setImageError] = useState(false);

    return <Image
        src={imageError ? placeolder : src}
        width={size}
        height={size}
        alt={alt}
        onLoadingComplete={(result) => {
            if (result.naturalWidth === 0) setImageError(true)
        }}
        onError={(event) => setImageError(true)}
        onEmptied={() => setImageError(true)}
    />
}

【问题讨论】：

将默认图片添加到公用文件夹中试试这样<Image src={originalImageUrl ?? /Default image} />
没有帮助:)
这看起来类似于stackoverflow.com/questions/66949606/… - 这些解决方案有帮助吗？
@JohnDetlefs 在某些情况下它不起作用
不适合哪些情况？

标签： reactjs image next.js