Question

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

到目前为止，这是我提出的：

MyComponent.jsx （使用ES7 property initializers syntax）

//...

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 (Not Found)

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

使用带有webpack的require.ensure()是否可以异步加载图像？
- 如果是这样，怎么样？
- 如果不是......
我可以与webpack异步加载图片吗？
- 如果是这样，怎么样？
根据我的例子，还有什么我应该考虑的吗？

Answer 1

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

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

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

更详细地阅读code splitting上的webpack文档。

如何使用webpack异步加载图像

1 个答案: