有没有更好的方式导入反应中的图像？

我将图像导入到一个组件，并且由于我们的文件结构，需要一个复杂的相对路径：有没有更好的方式导入反应中的图像？

// 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中的图像助手/资产管道？

来源

2017-04-25 rickymetz

是你使用'create-react-app'？我会说这是一个比React更多的webpack问题。你可以像[**这个答案**]一样更改'resolve.root'（http://stackoverflow.com/questions/27502608/resolving-require-paths-with-webpack）。 – Tholle

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

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

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

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

来源

2017-04-25 14:23:53

有没有更好的方式导入反应中的图像？

回答

相关问题