VueJS中如何为v-bind绑定的img src附加静态字符串前缀？

Hey folks, I’m working on a Vue component where I store image filenames in an array called imagesFolder, then loop through it to display the images. Here’s my current 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: right now I have to store the full path (including src/assets/) for each image in the array. Is there a way to attach this static prefix directly to the v-bind:src in the img tag instead? That way I only need to keep the filenames in the array, which would make my code cleaner.

Absolutely! Here are a couple of clean ways to do this: #

Method 1: Direct String Concatenation in the Template

You can combine the static prefix with the filename variable right in the template using template literals. I’ve also added a :key to the v-for loop (Vue requires unique keys for list items to track changes properly):

<template lang="html">
  <div>
    <div v-for="(image, index) in imagesFolder" :key="index">
      <img :src="`src/assets/${image}`" alt="" height="100px" width="auto"><br>
    </div>
  </div>
</template>

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

Method 2: Use a Computed Property (Great for Reusability)

If you might need this prefix elsewhere in the component, or want to keep your template even cleaner, create a computed property that maps filenames to full paths:

<template lang="html">
  <div>
    <div v-for="(image, index) in fullImagePaths" :key="index">
      <img :src="image" alt="" height="100px" width="auto"><br>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imagesFolder:['mickey.png','logo.png'],
      imagePrefix: 'src/assets/'
    }
  },
  computed: {
    fullImagePaths() {
      return this.imagesFolder.map(img => `${this.imagePrefix}${img}`);
    }
  }
}
</script>

This approach lets you update the asset path in one place (the imagePrefix variable) if you ever need to change it later, instead of editing every entry in the array.

Quick Note for Build Tools (Vue CLI/Vite)

If you’re using Vue CLI or Vite, you might need to adjust how you reference assets for production builds. For Vite, use new URL() to ensure assets are resolved correctly:

<img :src="new URL(`/src/assets/${image}`, import.meta.url)" alt="" height="100px" width="auto">

内容的提问来源于stack exchange，提问作者margherita pizza