如何使用webpack异步加载图片

Question

我试图在React组件中根据props动态加载图像。

到目前为止，这是我所想到的：

MyComponent.jsx (使用ES7属性初始化器语法)

//...

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

class MyComponent extends Component {
  state = {
    categoryIcon: getIcon.bind(this, this.props.icon)
  };

  render() {
    let iconStyle = {backgroundImage: `url('${this.state.categoryIcon}')`}

    return(
      <div className={styles.categoryIcon}
           style={iconStyle}
      ></div>
    )
  }
}

执行时会产生以下错误：

GET http://localhost:3000/function%20()%20%7B%20[native%20code]%20%7D 404 (未找到)

---

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

1. 使用webpack的require.ensure()是否可以异步加载图像？
   • 如果可以，如何实现？
   • 如果不行...
2. 我能否使用webpack异步加载图像？
   • 如果可以，如何实现？
3. 根据我的例子，还有别的什么需要考虑的吗？

- Craig McKenna

---

似乎回调函数被传递而不是被执行。我尝试添加了一个返回语句return cb()并且还将回调函数包装在IIFE中cb = (() => require(../../images/icons/${iconName}.svg))()两者都产生相同的错误。 - Craig McKenna

如果我这样做，会得到未定义的结果：` componentWillMount = (this.setState({categoryIcon: this.getIcon(this.props.icon)})) getIcon = (iconName) => { require.ensure([], require => { require(../../images/icons/${iconName}.svg) }) }; ` - Craig McKenna

Answer 1

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

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

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

阅读webpack关于代码分割的文档更加仔细有所帮助。

- Craig McKenna

---

我已经使用url-loader测试了这个解决方案，并且它也可以正常工作。 - Craig McKenna

这些图片现在不会最终被打包进去吗？ - flup

如果你将它们内联，是的。否则，为每个图像创建单独的文件。 - Craig McKenna

你能解释一下这是如何解决你的问题的吗？组件外的代码块有什么帮助？ - cyrf