React组件中根据数据比例值切换图片src却无内容显示的问题求助

嘿，我来帮你排查这个问题～你的代码里有两个核心错误导致图片无法显示，我一步步给你拆解：

1. JSX中放置了未执行的函数定义，而非渲染逻辑 #

你在Fragment里写了{() => { switch... }}，这只是把一个函数定义放在了JSX中，并没有执行它！React在渲染JSX时，遇到函数定义会直接跳过（因为它不是可渲染的DOM节点或组件），所以页面自然一片空白。

2. Switch语句的匹配逻辑完全错误 #

你的switch写法是switch(ratio)，然后case写的是case ratio <20:——这相当于把ratio的值和ratio<20的布尔结果做比较，比如当ratio是10时，ratio<20是true，switch会把10和true对比，完全不匹配，所以不会进入任何case分支，自然也不会返回图片组件。

接下来给你两种修正后的可行方案，你可以按需选择：

方案一：修正Switch逻辑+立即执行函数

import awful from "../../assets/awful.gif";
import notgood from "../../assets/notgood.gif";
import good from "../../assets/good.gif";
import verygood from "../../assets/verygood.gif";
import perfect from "../../assets/perfect.gif";

function displayRecapGif(ratio) {
  return (
    <>
      {/* 改成立即执行函数，让逻辑执行并返回图片组件 */}
      {(() => {
        // 把switch的表达式改成true，让case的布尔条件直接匹配
        switch (true) {
          case ratio < 20:
            return <img src={awful} className="w-32 h-32" alt="表现很差" />;
          case ratio >= 20 && ratio < 50:
            return <img src={notgood} className="w-32 h-32" alt="表现一般" />;
          case ratio >= 50 && ratio < 70:
            return <img src={good} className="w-32 h-32" alt="表现不错" />;
          case ratio >= 70 && ratio < 100:
            return <img src={verygood} className="w-32 h-32" alt="表现很好" />;
          case ratio === 100:
            return <img src={perfect} className="w-32 h-32" alt="表现完美" />;
          // 处理超出预期的ratio值，避免空白
          default:
            return <div>暂无匹配图片</div>;
        }
      })()}
    </>
  );
}

export default displayRecapGif;

方案二：改用If-Else逻辑（更直观易读）

其实对于这种范围判断，if-else的写法比switch更清晰，也不容易出错：

import awful from "../../assets/awful.gif";
import notgood from "../../assets/notgood.gif";
import good from "../../assets/good.gif";
import verygood from "../../assets/verygood.gif";
import perfect from "../../assets/perfect.gif";

function displayRecapGif(ratio) {
  let imgSrc = null;
  let altText = "";

  if (ratio < 20) {
    imgSrc = awful;
    altText = "表现很差";
  } else if (ratio >= 20 && ratio < 50) {
    imgSrc = notgood;
    altText = "表现一般";
  } else if (ratio >= 50 && ratio < 70) {
    imgSrc = good;
    altText = "表现不错";
  } else if (ratio >= 70 && ratio < 100) {
    imgSrc = verygood;
    altText = "表现很好";
  } else if (ratio === 100) {
    imgSrc = perfect;
    altText = "表现完美";
  }

  // 有图片源才渲染img，否则显示兜底内容
  return imgSrc ? <img src={imgSrc} className="w-32 h-32" alt={altText} /> : <div>暂无匹配图片</div>;
}

export default displayRecapGif;

另外我还加了alt属性，这是img标签的必填属性，对网页可访问性很重要；同时加了兜底逻辑，避免当ratio不在你预期的范围内时，页面再次出现空白的情况。

你可以试试这两种方案，应该就能正常显示图片啦 😊

内容来源于stack exchange