最近在使用Vue Cli寫專案練習，把一些小坑的地方紀錄一下，當用Vue.js動態產生v-bind:src中的路徑時，webpack的htmlloader 或image-loader不會自動把你的路徑編譯到static下去產生。範例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template v-for="item in items"> <li v-show="item.show"> <a href="#"> <img v-bind:src="item.img"> </a> </li> </template> data () { return { item: [ show: true, img: '../assets/test.jpg' ] } } |
這邊就可以看到原本在開發的相對路徑不會自動被編譯，npm run dev後，圖片會出不來。以下改動一個地方就搞定了～webpack裏就是甚麼是一個元件，透過require就可以拉入
|
1 2 3 4 5 6 7 8 |
data () { return { item: [ show: true, img: require('../assets/test.jpg' ) ] } } |
再次執行npm run dev，一切就順利囉！