HTML標籤裡的圖片url

我們經常遇見的一種情況是：

1. 需要通過foo.js動態新增一個DOM，這個DOM裡含有一個有圖片路徑的東西（比如是img標籤）；
2. 假如foo.js在abc資料夾下，圖片bar.png也在abc資料夾下；
3. 那麼我們想當然的在img的src屬性裡，寫了<img src="./bar.png"/>；
4. 然後報錯說：http://xx.xx.xx.xx/bar.png not fount；
5. 解決辦法是，參照以下示例：

// foo.js
let imgURL = require('./bar.png')
let imgDOM = `<img src="${imgURL}"
 
/>`

此時正常

css裡的圖片url

如果是例如在background-image:url()裡寫url，需要注意一點，圖片的url是相對於css檔案，準確的說，是有這個屬性的檔案的相對路徑，而不是元件（即DOM所在檔案）的相對路徑。

static檔案解決辦法

一般來說，我們配置的腳手架可能有static資料夾。

效果是用作靜態資料夾，注意，要腳手架或者是webpack配置才可以喔。

當把檔案放在這個裡面的時候，我們就可以通過/static/檔名來正確的獲取到該檔案了，可以無視相對路徑。

給一個vue的webpack腳手架，可以直接使用。

說明：

vue的腳手架

安裝

npm install
自帶axios、less、vue、vue-router、vuex。

以及例如babel、eslint、webpack、熱載入等，足以滿足一般開發需要。

詳細請閱讀package.json

另外，因此是從我已有專案中摘抄出來，因此可能有一些遺漏的，我未刪除的內容，如果在使用中發現了，請自行刪除。