如何使用 ReactJs 在 select 选项上显示 svg？

Question

我有一个 select 标志，选项是 img（src 是 svg）


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 and @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

，您在导入 svgs 时仍然会遇到 codesandbox 问题

如果您在 codesandbox 中工作，那么现在您可以改用图像。有用。参见 working demo

如何使用 ReactJs 在 select 选项上显示 svg？

How dispaly an svg on the option of select with ReactJs?

javascript

svg

reactjs

webpack

create-react-app