react里面引入圖片

引入圖片確實走了很多的坑，開始的認知里，所有靜態頁面都需要放在public里面能執行，代碼是這樣的

css

.back{
    background-image: url('/images/homeBackImg.png');
}

圖標路徑

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── images
│         └── homeBackImg.png
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js    

 

自己本地開發也可以，服務里面也可以用，爽歪歪

 

但是

 

發布到自己服務器的時候，img找不到了，404，打開瀏覽器訪問地址是這樣的

http://xxx.com/images/homeBack.png

但是打包好的image是在build里面，這樣就可以訪問

http://xxx.com/build/images/homeBack.png

但是要怎么才能在build的時候，自動讓業務里面的路徑變成url('./iamges.homeBack.png')呢，而且package.json里面已經設置了

"homepage": "."，但只會改變首頁的路徑，業務里面並不會去改，所以訪問不到

 

 

后面可以通過這個方式去，把image放在src里面，業務里面用相對路徑，在build的時候，會自動編譯成絕對路徑訪問

css

.back{
    background-image: url('../../images/homeBackImg.png');
}

圖片路徑

my-app
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src/
    └── images/
          └── homeBackImg.png
    └── common/
    └── component/
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js