Vue用v-for给src属性赋值的方法

针对“Vue用v-for给src属性赋值”的问题，可以采用以下两种方法进行实现。

方法一：使用计算属性

计算属性是 Vue 中的一个重要概念，它们可以将表达式封装为一个函数，通过计算得出最终值。使用计算属性可以将 v-for 循环中的数据动态绑定到 img 标签的 src 属性上。

<template>
  <div>
    <img v-for="(item, index) in images" :key="index" :src="getImageUrl(item)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['img1.jpg', 'img2.jpg', 'img3.jpg']
    }
  },
  methods: {
    getImageUrl(item) {
      return `https://cdn.example.com/${item}`
    }
  }
}
</script>

在上述代码中，getImageUrl 方法可以根据每个图片的名称拼接出图片的完整地址。该方法会在计算属性 getImageUrl 中被调用，返回动态绑定到 img 标签 src 属性上的值。通过使用计算属性，可以实现动态地给图片的 src 属性赋值。

方法二：使用 require 函数

在 Vue 中，可以使用 require 函数动态地加载图片资源。使用 require 函数可以将图片的地址直接绑定到 img 标签的 src 属性上。

<template>
  <div>
    <img v-for="(item, index) in images" :key="index" :src="getImageUrl(item)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['img1.jpg', 'img2.jpg', 'img3.jpg']
    }
  },
  methods: {
    getImageUrl(item) {
      return require(`@/assets/${item}`)
    }
  }
}
</script>

在上述代码中，getImageUrl 方法使用 require 函数加载了图片资源，它的参数为图片的地址，地址中可以包含 v-for 循环的变量。以上代码中，@/assets 是 Vue 项目中的一个约定的文件夹，在其中存放着各种不同的资源文件。在使用 require 函数时，需要将地址以字符串的形式传递给该函数。

可以通过以上两种方法实现 Vue 中给 src 属性赋值的功能，同时也能实现动态绑定对应的图片资源。