Vue.js 筆記之 img src

固定路徑（原始html）

index.html如下，其中，引號””裡面就是圖片的路徑地址

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

單個可變路徑

index.html如下

<div id="app">
        <img v-bind:src="imgSrc">
</div>

對應地，app裡面要有src，

var app = new Vue({
        el: `#app`,
        data: {
                imgSrc: `./assets/2.png`
        }
}

這樣就可以通過改變imgSrc來改變某一個img標籤指向的圖片了

basePath + 引數

比如有10張圖片放在./assets/目錄中，圖片名1.png, 2.png …

Vue的文件裡面有這麼一句話

Vue.js allows you to define filters that can be used to apply common text formatting.

因此需要藉助filter。html如下，其中img_id是圖片名中的數字，如1，2，3… 而getImage是filter中的一個key

<div id="app">
        <img v-bind:src="img_id | getImage">
</div>

Vue的options要新增filters

var app = new Vue({
        el: `#app`,
        data: {
                imgSrc: `./assets/2.png`
        },

        // text formatting
        filters: {
                getImage: function(teamId){
                        return `./assets/${teamId}.png`
                }
        },
}