React中如何根据数据库返回值条件渲染图片src路径

你预先定义稀有度-图片资源映射对象的思路是最优解，比嵌套三元判断、多分支if判断的可维护性高很多，后续新增稀有度等级只需要往映射对象里加键值对即可，不需要改动核心渲染逻辑。

完整可运行代码 #

// 映射表定义在组件外部即可，避免组件每次重渲染重复生成对象，减少不必要的性能开销
const RARITY_IMG_MAP = {
  Exclusive: require('../../public/Rarity_Exclusive.png'),
  Ultra: require('../../public/Rarity_Ultra.png'),
  // 后续新增稀有度直接在这里追加对应键值对就行
  // Covert: require('../../public/Rarity_Covert.png'),
  // Classified: require('../../public/Rarity_Classified.png')
}

// 配置兜底默认图，避免接口返回未收录的稀有度值时出现图片裂图
const DEFAULT_RARITY_IMG = require('../../public/Rarity_Default.png')

function KnifesComponent() {
  const knifeCollection = collection(db, "knives");
  const [knives, setKnives] = useState([]);
  
  useEffect(() => {
    const unSubscribe = onSnapshot(knifeCollection, (snapshot) => {
      setKnives(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    });
    // 组件卸载时解绑快照实时监听，避免内存泄漏
    return () => unSubscribe()
  }, []);  

  return (
    <div className="knife-list">
      {knives.map((skin) => {
        // 优先匹配映射表中的对应图片，匹配不到就用兜底图
        const currentRarityImg = RARITY_IMG_MAP[skin.rarity] ?? DEFAULT_RARITY_IMG
        return (
          <div key={skin.id} className="knife-item">
            <span>{skin.rarity}</span>
            <div>
              <img src={currentRarityImg} alt={`${skin.rarity}稀有度标识`} />
            </div>
          </div>
        )
      })}
    </div>
  )
}

原有代码需要修正的问题 #

• 你之前写的src={isUltra : require('../../public/Rarity_Ultra.png')}是非法JSX语法，对象键值对不能直接写在属性位置，用映射表直接取值就可以规避这个问题
• 数组map循环渲染的元素必须加唯一key属性，一般用数据库返回的文档id即可，否则React会抛渲染警告，列表更新时也可能出现状态错乱
• onSnapshot绑定的实时监听要在useEffect的清理函数里解绑，组件卸载后不销毁监听会造成内存泄漏
• img标签记得补充alt属性，符合无障碍访问规范
• JSX中return多个并列元素时必须有单个根节点包裹，不能直接并列返回文本和div标签，否则会报语法错误

补充提示：如果你的项目是Vite或Create React App搭建的，public目录下的静态资源不需要用require引入，直接写/Rarity_Ultra.png这类根路径就可以正常访问，映射表可以简化为直接存路径字符串，构建时会自动处理资源引用。

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