Next.js实现图片正常时隐藏Span、缺失时显示Span的方案咨询

下面提供几种可行的实现思路，覆盖纯CSS、Next.js生态组件、原生JS监听三种场景：

方法一：纯CSS实现（简单场景适用） #

先修正默认显示逻辑，默认隐藏span、显示图片，再通过CSS选择器匹配图片无效的情况，切换显示状态：

/* 默认状态：显示图片，隐藏备用文本 */
.brand span {
  display: none;
}

/* 当图片src为空/无效时，隐藏图片 */
.brand img:not([src]),
.brand img[src=""],
.brand img:has(:invalid) {
  display: none;
}

/* 对应显示相邻的备用文本span */
.brand img:not([src]) + span,
.brand img[src=""] + span,
.brand img:has(:invalid) + span {
  display: inline-block;
}

注意：:has()选择器需要现代浏览器支持，若需兼容旧版浏览器，可结合方法三的JS方案补充。

方法二：Next.js Image组件实现（推荐） #

利用Next官方的next/image组件自带的onError事件，结合React状态控制显示，更贴合Next.js项目生态：

import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';

export default function BrandLogo() {
  const [imgLoadFailed, setImgLoadFailed] = useState(false);
  // 替换为实际的logo地址，可从props/状态中获取
  const logoSrc = "";

  return (
    <div className='brand'>
      <Link href="#">
        {/* 图片有效且加载成功时显示 */}
        {!imgLoadFailed && logoSrc && (
          <Image
            src={logoSrc}
            alt="品牌Logo"
            width={100}
            height={40}
            onError={() => setImgLoadFailed(true)}
          />
        )}
        {/* 图片为空或加载失败时显示备用文本 */}
        {(imgLoadFailed || !logoSrc) && <span>UnSet</span>}
      </Link>
    </div>
  );
}

方法三：原生JS事件监听（通用方案） #

通过监听图片的load和error事件，动态切换显示状态，兼容所有场景：

import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';

export default function BrandLogo() {
  const imgRef = useRef(null);
  const [showFallbackText, setShowFallbackText] = useState(false);
  const logoSrc = ""; // 替换为实际logo地址

  useEffect(() => {
    const imgElement = imgRef.current;
    if (!imgElement) return;

    // 若src为空，直接显示备用文本
    if (!logoSrc) {
      setShowFallbackText(true);
      return;
    }

    // 加载成功时隐藏备用文本
    const handleLoad = () => setShowFallbackText(false);
    // 加载失败时显示备用文本
    const handleError = () => setShowFallbackText(true);

    imgElement.addEventListener('load', handleLoad);
    imgElement.addEventListener('error', handleError);

    // 组件卸载时清理事件监听
    return () => {
      imgElement.removeEventListener('load', handleLoad);
      imgElement.removeEventListener('error', handleError);
    };
  }, [logoSrc]);

  return (
    <div className='brand'>
      <Link href="#">
        {!showFallbackText && (
          <img
            ref={imgRef}
            src={logoSrc}
            alt="UnSet"
            style={{ display: showFallbackText ? 'none' : 'inline-block' }}
          />
        )}
        {showFallbackText && <span>UnSet</span>}
      </Link>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Neyunse