• 固定路徑（原始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` } }, } ```

原文地址：https://segmentfault.com/a/1190000013090116

轉載于:https://www.cnblogs.com/lalalagq/p/9951699.html

總結

以上是生活随笔為你收集整理的Vue.js 笔记之 img src的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。