固定路径(原始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` } }, }
Vue.js 笔记之 img src
原文作者:FrozenMap
原文地址: https://segmentfault.com/a/1190000013090116
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
原文地址: https://segmentfault.com/a/1190000013090116
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。