无法使用React导入SVG动态

Question

我尝试了以下代码来动态导入SVG。

let selectedFloor = require('../svg/floor1.svg');
this.setState({
  SvgMap : selectedFloor
})

render() {
  return (
    <div>
      <span dangerouslySetInnerHTML={{ __html: this.state.SvgMap }} />
    </div>
  );

结果：

Answer 1

尝试这样：

<span dangerouslySetInnerHTML={{ __html: '<img src=`${this.state.SvgMap}` /> }} />

Answer 2

我认为您应该使用img标签，并且可以将SVG文件的路径保持在状态或仅保留名称的状态。

const selectedFloor = 'floor1.svg';
this.setState({
    SvgMap : selectedFloor
});

render() {   
    return (
      <div>
          <img src={`../svg/${this.state.SvgMap}`}
      </div>
    );
}