在动态获取到一个图片的 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来实现，具体实现不赘述了。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue