是否有更好的方式导入图像？

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';

有更好的方法吗？像ruby中的图像助手/资产管道？

Answer 1

如果您使用Webpack捆绑您的应用程序，则可以使用webpack aliases：

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

然后，您可以简单地使用别名来引用您的资产：

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