javascript - React Webpack 动态文件名

Question

我有 100 个图像资源，代表用户可能处于的级别(级别 1-100)。现在我正在使用内联样式显示这样的图标:

const backgroundImg = require(`app/images/levels/${currentLevel}.svg`);

return (
  <div
    style={{ backgroundImage: `url(${backgroundImg})` }}
  />
);

根据用户级别要求这些图像的更好方法是什么？ (当前抛出导入/无动态需求错误)

Answer 1

const getImagePerLevel = (currentLevel) => {
    return import(`app/images/levels/${currentLevel}.svg`);
}

return (
  <div
    style={{ backgroundImage: `url(${getImagePerLevel(currentLevel)})` }}
  />
);