Q:

VueJS attach a static string to v-bind

My use case is something like this.

I stored images names in an array called imagesFolder
then I retrieve names from that array and display on my vue component.

This is my code
<template lang="html">
  <div class="">
    <div class="" v-for="image in imagesFolder">
      <img v-bind:src="image" alt=""  height="100px" width="auto"><br>
    </div>
  </div>

    </template>

    <script>
    export default {
      data(){
        return{
          imagesFolder:['src/assets/mickey.png','src/assets/logo.png']
        }
      }
    }
    </script>

My question is every time I have to store the static location part src/assets/ instead of doing this. Is there a way to attach this src/assets/ part to the img tag. I hope you understand my question.

A:

You can provide just the filename of the images in an array in your data.
<script>
  export default {
    data() {
      return{
        images: ['mickey', 'logo']
      }
    }
  }
</script>

Then, you can loop through and use only the filename of the image as the dynamic value.
<div class="" v-for="image in images">
  <img :src="`src/assets/${image}.png`" alt=""  height="100px" width="auto"><br>
</div>

