uniapp中怎么动态改变图片的src属性

uniapp中动态改变图片src属性的方法

在uniapp中，图片是一个经常被使用的元素，我们通常会使用标签来显示图片。但是在实际开发中，有时候需要动态改变图片的src属性，让图片显示不同的内容。那么如何动态改变图片的src属性呢？下面我将详细介绍uniapp中动态改变图片src属性的方法。

1. 利用v-bind指令绑定src属性

我们可以利用v-bind指令来绑定图片的src属性。在模板中，我们可以这样写：

<template>

  <img :src="imgSrc">
</template>

上面的代码中，我们使用了v-bind指令来绑定img标签的src属性，将imgSrc绑定到了src属性上。此时，imgSrc就是我们的数据源，我们可以通过改变imgSrc的值来动态改变图片的src属性。在数据源中，我们可以这样定义imgSrc：

data() {

  return {
    imgSrc: ''
  }
}

在实际开发中，我们可以通过ajax请求获取图片的地址，并将地址赋给imgSrc，就可以动态改变图片的src属性了。

接下来，我们可以在methods中编写ajax请求：

methods: {

  getImage() {
    wx.request({
      url: 'http://example.com/getImage',
      success(res) {
        this.imgSrc = res.data.url;
      }
    })
  }
}

上面的代码中，我们编写了getImage方法，通过ajax请求获取图片的地址，并将地址赋给imgSrc。这样，就可以动态改变图片的src属性了。

2. 使用计算属性动态获取src属性

除了使用v-bind指令绑定src属性外，还可以使用计算属性来动态获取src属性。我们可以这样写：

<template>

  <img :src="imgSrc">
</template>

computed: {

  imgSrc() {
    return 'http://example.com/getImage'
  }
}

上面的代码中，我们编写了一个计算属性imgSrc，在这个计算属性中，我们返回了图片的地址。这样，每次改变imgSrc的值，都会重新计算imgSrc的值，从而实现动态改变图片的src属性。

3. 通过refs获取img标签对象，动态修改src属性

除了使用v-bind指令绑定src属性和使用计算属性动态获取src属性外，还可以通过refs获取img标签对象，然后动态修改src属性。我们可以这样写：

<template>

  <img ref="img">
</template>

methods: {

  getImage() {
    wx.request({
      url: 'http://example.com/getImage',
      success(res) {
        this.$refs.img.src = res.data.url;
      }
    })
  }
}

上面的代码中，我们通过refs获取到img标签对象，并将它赋给了一个变量img。在getImage方法中，我们通过ajax请求获取图片地址，并将地址赋给了img的src属性。这样，就可以动态修改图片的src属性了。

总结

以上是uniapp中动态改变图片src属性的方法，总的来说，我们可以使用v-bind指令绑定src属性、使用计算属性动态获取src属性、通过refs获取img标签对象动态修改src属性。在实际开发中，我们可以根据具体情况选择合适的方法来动态改变图片的src属性。