反応に画像をインポートするより良い方法はありますか？

Question

私は、複雑な相対パスをコンポーネントに画像をインポートし、原因私たちのファイル構造にしていますが必要です。

// TODO is there a better way of importing images? image helper? 

import browserImg from './../../../assets/images/screenshot-browser.png'; 
import phoneImg from './../../../assets/images/screenshot-phone.png'; 

は、これを行うのより良い方法はありますか？ルビーの画像ヘルパー/アセットパイプラインのようなもの？

Answer 1

アプリケーションをバンドルするのWebPACKを使用する場合は、あなたがwebpack aliasesを利用することができます。そして、

resolve: { 
    alias: { 
     assets: 'src/assets' // relative to the webpack configuration file 
    } 
} 

、あなたは単にのようなあなたの資産を参照するためにエイリアスを使用することができます。

import browserImg from 'assets/images/screenshot-browser.png';