javascript - 如何使用 React Js 在 select 选项上显示 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 />;
  }
}