React类组件中如何在函数内使用已导入的图片？

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是把JSX语法和普通JavaScript代码搞混啦——{ad1}是React的JSX里用来插入变量的语法，但在类方法里的原生DOM操作代码中，直接用变量名就行，完全不需要加花括号。

具体解决步骤： #

• 去掉src赋值时的花括号，直接用你导入的ad1变量
• 记得确保DOM元素#ad已经被渲染到页面上再执行getVal方法，不然可能会找不到元素报错（比如在componentDidMount生命周期里调用这个方法，这时候组件已经挂载完成，DOM肯定存在）

修改后的完整代码示例：

import ad1 from '../assets/ad1.png';
import ad2 from '../assets/ad2.png';
import ad3 from '../assets/ad3.png';
import ad4 from '../assets/ad4.png';

class Adbanner extends React.Component{
  componentDidMount() {
    // 组件挂载后再调用，保证能找到目标DOM元素
    this.getVal();
  }

  getVal() {
    const adElement = document.getElementById('ad');
    // 直接用ad1变量，不用加花括号！
    if (adElement) { // 加个判断，防止元素不存在时报错
      adElement.src = ad1;
    }
  }

  render() {
    return (
      <div>
        <img id="ad" alt="广告位" />
      </div>
    );
  }
}

额外的React风格建议： #

其实React更推荐用状态驱动渲染，而不是直接操作DOM，这样代码更符合React的设计思路，也更好维护。比如你可以把当前要显示的图片存在组件状态里，在render里直接绑定src：

import ad1 from '../assets/ad1.png';
import ad2 from '../assets/ad2.png';
import ad3 from '../assets/ad3.png';
import ad4 from '../assets/ad4.png';

class Adbanner extends React.Component{
  // 初始化状态，默认显示ad1
  state = {
    currentAd: ad1
  };

  componentDidMount() {
    // 举个例子：每隔3秒随机切换广告
    setInterval(() => {
      const adList = [ad1, ad2, ad3, ad4];
      const randomIdx = Math.floor(Math.random() * adList.length);
      this.setState({ currentAd: adList[randomIdx] });
    }, 3000);
  }

  render() {
    // 直接在JSX里用状态变量，自动更新
    return (
      <div>
        <img src={this.state.currentAd} alt="轮播广告" />
      </div>
    );
  }
}

这种方式完全不需要手动操作DOM，React会帮你自动更新UI，是不是更省心？

内容的提问来源于stack exchange，提问作者J.Doe