在v-bind中使用JavaScript代码（或快捷方式“：”）：

:href="'#purchase-' + item.id"

和

:id="'purchase-' + item.id"

如果使用ES6或更高版本：

:id="`purchase-${item.id}`"

使用v-bind或快捷方式语法“：”绑定属性。示例：

<input v-bind:placeholder="title">
<input :placeholder="title">

就用

:src="`img/profile/${item.photo}`"

如果你从一个对象数组中提取数据，你需要像我下面做的那样在你的对象中包含 require（'assets/path/image.jpeg'）。

示例：

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

在v-img元素中使用 require（objectName.propName.urlPath） 对我不起作用。

<v-img :src="require(people.closeup.urlPath)"></v-img>

最简单的方法是也需要文件地址：

<img v-bind:src="require('../image-address/' + image_name)" />

下面的完整示例显示了**../assets/logo.png：**

<template>
    <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
  export default {
    name: "component_name",
    data: function() {
      return {
        img: "logo.png"
      };
    }
  };
</script>

最优雅的解决方案是将图像保存在Webpack之外。默认情况下，Webpack将图像压缩在Base64中，因此如果您将图像保存在assets文件夹中，这将不起作用，因为Webpack将压缩base64中的图像，并且 * 不是 * React变量。
为了解决这个问题，你需要将你的图片保存在你的 * 公共路径 * 中。通常公共路径是在“公共”文件夹或“静态”中。
最后，你可以这样做：

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

你的HTML可以这样做：

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

何时使用公共文件夹

• 在构建输出中需要一个具有特定名称的文件
• 文件依赖于一个在执行时可以改变的React变量
• 您有图像，需要动态引用它们的路径
• 某些库可能与Webpack不兼容，您没有其他选择，只能将其作为标记包含在内。

更多信息：* Vue.js文档中的“HTML和静态资产”*

如果以上所有答案都不起作用，请在Vue-3和Composition API中专门执行此操作
：src=“require（../image/animal_image/${image}）”