React中使用useState设置导入图片为img src失败问题排查

核心问题1：条件判断的语法错误 #

你的if (counter = donnees[0])用了赋值运算符=，而非相等比较运算符===，这会直接把donnees[0]的值赋值给counter，完全偏离了判断两者是否相等的逻辑。

核心问题2：图片导入与状态更新的细节 #

React中完全可以用useState存储导入的图片资源，但要满足两个前提：

1. 图片已正确导入：

// 替换为实际的图片路径
import quiche from './quiche.jpg';

2. changeImage函数需要被正确触发执行——比如在counter变化时、组件挂载时，或者用户交互事件中。

修正后的完整代码示例 #

import React, { useState, useEffect } from 'react';
import quiche from './quiche.jpg'; // 必须正确导入图片

const YourComponent = () => {
  const [counter, setCounter] = useState(0);
  const [image, setImage] = useState();

  const changeImage = () => {
    // 用===做严格相等判断
    if (counter === donnees[0]) {
      setImage(quiche);
    }
  };

  // 监听counter变化，自动触发图片切换逻辑
  useEffect(() => {
    changeImage();
  }, [counter]);

  return (
    <div>
      {/* 示例：点击按钮切换counter测试效果 */}
      <button onClick={() => setCounter(0)}>切换到目标图片</button>
      <div className="Recette-image">
        <img className="quiche" src={image} alt="quiche" />
      </div>
    </div>
  );
};

export default YourComponent;

额外注意事项 #

• 绝对不能直接给image赋值（比如image = quiche），必须使用setImage更新状态，否则组件不会重新渲染。
• 可以通过console.log(donnees[0], counter)调试两者的实际值，确保判断条件的合理性。

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