如何在 nextjs 图像组件中显示占位符图像

Question

我正在尝试显示来自 API 调用的图像。我想显示一个占位符图像，以防没有图像或任何错误。为此，我写了这段代码，

const [errorImage, setErrorImage] = useState(null);

  <Image
                            src={`${imageUrl}/${item.image}`}
                            alt="image"
                            layout="fill"
                            objectFit="contain"
                            onError={(e) => {
                              if (!errorImage) {
                                setErrorImage(true);
                                e.target.src = "/static/placeholder.jpg";
                              }
                            }}

但是没用。

Answer 1

在设置true时改变errorImage的状态会导致组件re-render，所以不需要直接设置e.target.src。

选项 1 相反，您可以执行以下操作：

const [errorImage, setErrorImage] = useState(null);
const errorImageUrl = "/static/placeholder.jpg";

  const url = errorImage ? errorImageUrl : `${imageUrl}/${item.image}`;
  <Image
    src={url}
    alt="image"
    layout="fill"
    objectFit="contain"
    onError={(e) => {
      if (!errorImage) {
        setErrorImage(true);
      }
    }}

选项 2 或者，您可以使用在 NextJS 11 中添加到 <Image> 组件的新 placeholder 道具。这将显示您提供的图像的模糊版本。

  <Image
    src={url}
    alt="image"
    layout="fill"
    placeholder="/static/placeholder.jpg"
    objectFit="contain"

如何在 nextjs 图像组件中显示占位符图像

How to show a placeholder image in nextjs image component

javascript

reactjs

next.js

nextjs-image