此解决方案适用于 Vue-2 用户：

1. 在vue-2如果你不喜欢在你的文件static夹（相关信息），或
2. 在vue-2&vue-cli-3如果您不想将文件保存在文件public夹中（static文件夹重命名为public）：

简单的解决方案是:)

<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}

如果您想将静态图像保存在static/assets/img或public/assets/img文件夹中，那么只需执行以下操作：

<img src="./assets/img/clear.gif" />
<img src="/assets/img/clear.gif" /> // in some case without dot ./

如果要将字符串绑定到src属性，则应将其用单引号括起来：

<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">

IMO 您不需要绑定字符串，您可以使用简单的方法：

<img src="/static/img/clear.gif">

在此处查看有关图像预加载的示例：http : //codepen.io/pespantelis/pen/RWVZxL

这就是我解决它的方法。：

      items: [
        { title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') },
        { title: 'Projects',  icon: require('@/assets/icons/sidebar/projects.svg') },
        { title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') },
      ],

在模板部分：

<img :src="item.icon" />

在这里查看它的实际效果

@Pantelis 的回答以某种方式引导我找到解决类似误解的方法。我正在处理的留言板项目需要显示可选图像。我试图让 src=imagefile 连接固定路径和可变文件名字符串，直到我看到 "''" 引号的古怪用法:-)

<template id="symp-tmpl">
  <div>
    <div v-for="item in items" style="clear: both;">
      <div v-if="(item.imagefile !== '[none]')">
        <img v-bind:src="'/storage/userimages/' + item.imagefile">
      </div>
      sub: <span>@{{ item.subject }}</span>
      <span v-if="(login == item.author)">[edit]</span>
      <br>@{{ item.author }}
      <br>msg: <span>@{{ item.message }}</span>
    </div>
  </div>
</template>

声明该值包含图像路径的新变量

const imgLink = require('../../assets/your-image.png')

然后调用变量

export default {
    name: 'onepage',
    data(){
        return{
            img: imgLink,
        }
    }
}

将其绑定在 html 上，示例如下：

<a href="#"><img v-bind:src="img" alt="" class="logo"></a>

希望它会有所帮助