Vue.js 为 img 标签设置动态URL

在动态获取到一个图片的 url (形如http://10.0.0.1:XXXX/home/1.png)之后,应该如何将它动态的与img标签绑定在一起,网上的方法不是很精炼,所以我写了一段简单的代码.

<template>
  <div id = "001">
  	<img :src = "this.sfile"/>
  </div>
</template>
<script>
export default {
  data(){
    return{
	  sfile: "http://10.0.0.2:3000/file?path=/home/zhaodd/2.png"
	}
  }
}
</script>

在img 中 用v-bind(等同于:)实现绑定,这里注意一下,在v-bind中,单引号”引用的内容，我们作为一个真正的字符串使用，双引号”“应用的内容，作为变量/表达式而使用,很多人注意不到这一点导致了错误.

同理如果是多个图片的话可以采用v-for来实现，具体实现不赘述了。