我试图在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 (未找到)
所以,我的问题有多个部分。
- 使用webpack的
require.ensure()
是否可以异步加载图像?- 如果可以,如何实现?
- 如果不行...
- 我能否使用webpack异步加载图像?
- 如果可以,如何实现?
- 根据我的例子,还有别的什么需要考虑的吗?
return cb()
并且还将回调函数包装在IIFE中cb = (() => require(
../../images/icons/${iconName}.svg))()
两者都产生相同的错误。 - Craig McKenna../../images/icons/${iconName}.svg
) }) }; ` - Craig McKenna