有沒有更好的方式導入反應中的圖像？

我將圖像導入到一個組件，並且由於我們的文件結構，需要一個複雜的相對路徑：有沒有更好的方式導入反應中的圖像？

// 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

有沒有更好的方式導入反應中的圖像？

回答

相關問題