Vue.js資產的文件路徑使用V-的

當我剛剛使用Vue.js開始，這是簡單的加載靜態IMG當有足夠的訪問資產的文件夾，如我的標誌：Vue.js資產的文件路徑使用V-的

<img src="../assets/logo.png">

不過，我使用v-用於創建使用樣本數據的幾個列表項「M，這是我的模板：

<ul> 
    <li v-for="item in items" :key="item.id"> 
     <img v-bind:src="item.img" v-bind:alt="item.title"> 
     <h2 class="md-title">{{item.title}}</h2> 
    </li> 
</ul>

，這是一樣的.vue文件中聲明的樣本數據：

export default { 
    name: 'front', 
    data() { 
    return { 
     items: [ 
     {title: 'Google Pixel', img: '../assets/pixel.png', id: 1}, 
     {title: 'Samsung Galaxy S8', img: '../assets/s8.png', id: 2}, 
     {title: 'iPhone 7', img: '../assets/iphone.png', id: 3} 
     ] 
    } 
    } 
}

我的問題是，imgs所有404這似乎很奇怪，因爲相同的路徑在靜態imgs上工作。如果我使用絕對路徑，如本它的工作原理

https://media.carphonewarehouse.com/is/image/cpw2/pixelBLACK?$xl-standard$

已經通過，我發現這個https://vuejs-templates.github.io/webpack/static.html

這或許可以解釋它的文檔看了，但我已經試過各種方法，沒有任何運氣提示：

資產解決規則

相對URL，例如./assets/logo.png將被解釋爲模塊依賴項。它們將被替換爲基於您的Webpack輸出配置的自動生成的URL。

未加前綴的URL，例如， assets/logo.png將被視爲相對URL並翻譯爲./assets/logo.png。

以〜爲前綴的URL被視爲模塊請求，類似於require（'some-module/image.png'）。如果你想利用Webpack的模塊解析配置，你需要使用這個前綴。例如，如果您有資產的解析別名，則需要使用它來確保尊重別名。

根相對URL，例如， /assets/logo.png根本不處理。

這是用的WebPack而不是VUE的問題嗎？看起來很瘋狂，一個很容易使用的庫會使文件路徑變得複雜。

來源

2017-04-17 Pixelomo

我張貼在Vue.js'論壇這個問題，並萊納斯博格回來給我的答案：

這些解釋僅指在HTML或CSS中使用的資產路徑。在這些中，相應的webpack加載器可以識別這些路徑並對其進行管理。

但是，如果你的Javascript中有路徑，webpack不能推斷出那些字符串應該被視爲路徑（它不能「理解」你的程序，並且看到這些字符串以後會用在HTML中），所以你有通過使用require（）來明確地告訴webpack這些字符串確實是依賴關係的路徑。

export default { 
    name: 'front', 
    data() { 
    return { 
     items: [ 
     {title: 'Google Pixel', img: require('../assets/pixel.png'), id: 1}, 
     {title: 'Samsung Galaxy S8', img: require('../assets/s8.png'), id: 2}, 
     {title: 'iPhone 7', img: require('../assets/iphone.png'), id: 3} 
     ] 
    } 
    } 
}

來源

2017-04-17 09:42:16 Pixelomo

Vue.js資產的文件路徑使用V-的

回答

相關問題