如何动态导入图片

Question

我尝试为 React hangman 项目动态更改 img。所以我尝试了一个状态，但是出现了一个错误，说 Cannot convert object to primitive value

所以我尝试将动态导入的函数直接传递到我的 img，但这会造成无限循环。

这是函数

loadHangmanSvg() {
  const { attempts } = this.state
  const svgName = `hangman_${attempts}`
  import(`./assets/${svgName}.svg`).then(svgName => {
    this.setState({
      svgName
    });
  });
};

这是道具

svgHangman={this.loadHangmanSvg()}

感谢您的帮助:D

Answer 1

loadHangmanSvg() {
  const { attempts } = this.state
  const svgName = `hangman_${attempts}`
  import(`./assets/${svgName}.svg`).then(svgName => {
    // only when svgName is undefined, change the state of component
    if (!this.state.svgName) {
        this.setState({
            svgName
        });
    }
  });
};