[Vuejs]-How to modify src attribute in image to make many cards VueJS

This kind of code should solve your use-case, here is a SFC link.

page

<template>
  <div v-for="image in images">
    <card :image="image"></card>
  </div>
</template>

<script>
import Card from './Card.vue'
export default {
  components: { Card },
  data() {
    return {
      images: ['https://images.pexels.com/photos/5044497/pexels-photo-5044497.jpeg', 'https://images.pexels.com/photos/9365604/pexels-photo-9365604.jpeg', 'https://images.pexels.com/photos/10392192/pexels-photo-10392192.jpeg']
    }
  }
}
</script>

Card.vue

<template>
  <div>
    <img slot="cover" alt="example" :src="image" />
  </div>
</template>

<script>
export default {
  props: ['image']
}
</script>

<style scoped>
img { 
  width: 200px;
}
</style>

Here is the end result