Как загрузить изображения асинхронно с webpack

Question

Я пытаюсь загрузить изображение динамически на основе реквизита в реагирующем компоненте.

До сих пор это то, что я придумал:

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)

---

Итак, у меня вопрос состоит из нескольких частей.

1. Загрузка изображений асинхронно возможно с помощью require.ensure() с WebPack?
   • Если да, то как?
   • Если нет ...
2. Могу ли я загружать изображения асинхронно с WebPack?
   • Если да, то как?
3. На основании моего примера есть что-нибудь еще, что я должен рассмотреть?

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 документы на code splitting более тщательно помогла.