Javascript 如何使用webpack异步加载图像

我正在尝试根据react组件中的道具动态加载图像

到目前为止，我的想法是：

MyComponent.jsx（使用）

/。。。
const getIcon=（iconName）=>{
require.确保（[]，require=>{
cb=（）=>需要（`.././图像/图标/${iconName}`）
})
}
类MyComponent扩展组件{
状态={
categoryIcon:getIcon.bind（this，this.props.icon）
};
render（）{
让iconStyle={backgroundImage:`url（'${this.state.categoryIcon}'）`}
返回(
)
}
}

执行它会产生以下错误：

GEThttp://localhost:3000/function%20（）%20%7B%20[本机%20code]%20%7D 404（未找到）

---

所以，我的问题有多个部分。

是否可以使用网页包的

require.sure（）

异步加载图像？

• 如果是，怎么做
• 如果不是

我可以用webpack异步加载图像吗？

• 如果是，怎么做

根据我的例子，我还有什么要考虑的吗？

---

我用以下代码解决了这个问题：

(iconName) => {
  require.ensure([], require => {
  require(`../../images/icons/${iconName}.svg`)
  })
}

class MyComponent extends Component {
  state = {
    categoryIcon: require(`../../images/icons/${this.props.icon}.svg`)
  };

---

仔细阅读网页上的文档会有所帮助。

回调函数似乎正在传递而不是执行。我尝试添加一个return语句

return cb（）

，并将回调函数包装在一个iLife

cb=（（）=>require（

。/../images/icons/${iconName}.svg

））（

两者都会产生相同的错误，如果我这样做，我会得到未定义的错误：`componentWillMount=（this.setState（{categoryIcon:this.getIcon（this.props.icon）}））getIcon=（iconName）=>{require.sure（[]，require=>{require（

./../images/icons/${iconName}.svg

）}）`我已经用url加载器测试了这个解决方案，它也可以工作。现在图像不会在包中结束吗？如果你内联它们，是的。否则会为每个图像创建单独的文件。您能解释一下这是如何解决您的问题的吗？组件外部的代码块有什么帮助？

(iconName) => {
  require.ensure([], require => {
  require(`../../images/icons/${iconName}.svg`)
  })
}

class MyComponent extends Component {
  state = {
    categoryIcon: require(`../../images/icons/${this.props.icon}.svg`)
  };