如何在 React Js 的选择选项上显示 svg？

Question

我有一个选择标志，其中选项是 img（其中 src 是 svg）

我的codeSandbox。

Config.default = "fr";
Config.list = {
  de: {
    text: "Deutsch",
    icon: require("./images/de.svg")
  },
  en: {
    text: "English",
    icon: require("./images/eng.svg")
  },
  it: {
    text: "Italiano",
    icon: require("./images/italy.svg")
  }
};
class App extends Component {
  constructor() {
    super();

    this.state = {
      language: Config.default
    };
  }

  render() {
    return (
      <header className="d-flex align-items-end justify-content-end">
        <LanguageList Language={this.state.language} />
        <FormControl variant="outlined">
          <div className="wrap-select">
            <Select
              value={this.state.language}
              className="select-lang"
              onChange={e => this.setState({ language: e.target.value })}
              inputProps={{
                name: "locale"
              }}
            >
              <MenuItem value="en">
                <div className="wrap-content-lang">
                  <img width="20" src="./images/eng.svg" />
                </div>
              </MenuItem>
              <MenuItem value="it">
                <div className="wrap-content-lang">
                  <img width="20" src="./images/italy.svg" alt="it" />
                </div>
              </MenuItem>
              <MenuItem value="de">
                <div className="wrap-content-lang">
                  <img width="20" src="./images/de.svg" />
                </div>
              </MenuItem>
            </Select>
          </div>
        </FormControl>
      </header>
    );
  }
}

当我运行它时，我得到：

图片不显示，如何显示？

Answer 1

问题是这样的src 路径在运行时不可用：

<img width="20" src="./images/eng.svg" alt="en" />

// instead
<img src={require("./images/eng.svg")}/>

在构建时，webpack 会生成一个散列路径，参见 Adding Images, Fonts, and Files 和 @gdh answer。

import { ReactComponent as GermanFlag } from "./images/de.svg";

class App extends Component {
  render() {
    return <GermanFlag />;
  }
}

Answer 2

通过create react app，要显示svg，可以使用import来显示图片。

import ItalySVG from './images/italy.svg'

或者 - 你可以要求它。

<img src={require("./images/italy.svg")}/>

然而，由于open issue

如果您在代码沙箱中工作，那么现在您可以使用图像来代替。有用。见working demo