您可以使用cPicture作为计算属性，onImgError作为方法：

new Vue({
  el: '#app',
  data() {
    return {
      failed_image: false
    }
  },
  computed: {
    cPicture: function() {
      return this.failed_image ? "https://picsum.photos/500/300?image=4" : "https://pisum.photos/500/300?image=5";
    },



  },
  methods: {
    onImgError: function(event) {

      this.failed_image = true;

    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.7/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-container grid-list-sm fluid>
            <v-img :src="cPicture" contain v-on:error="onImgError"></v-img>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

检查此pen

编辑

我为所需的图像提供了一个无效的图像链接，在这种情况下，我们将在控制台中显示一个异常：
“[Vuetify]图像加载失败
在本例中，我们将加载另一个具有有效链接图像

我做同样的事情，但代码更少。

<v-img tile :src="logo.url" v-on:error="logo.url='/logo.svg'" />

这个问题已经在github上提出，应该在Vuetify 3中添加
这是我解决这个问题的方法
我首先创建两个数据

data(): {
 avatarLoadingFailed: false,
 fallbackAvatar: fallbackAvatar,
}

fallbackAvatar是我希望在加载失败时显示的图像文件
然后我创建一个计算来保存要显示的化身

computed: {
  avatar() {
    return this.avatarLoadingFailed
      ? this.fallbackAvatar
      : this.getUserAvatar;
  },
}

最后在我的template标签中

// @error="avatarLoadingFailed = true" works fine as well
<v-img :src="avatar" v-on:error="avatarLoadingFailed = true"/>

我已经在VueJS中使用和不使用typescript进行了尝试和测试

我喜欢@maurilio-atila所做的。在我的例子中，图像来自另一个服务器，我最终这样做：

<v-img :src="`${item.image ?`https://some/endpoint/${item.image}` : '/fallback.png'}`"/>

虽然它不处理v-on:error，但它避免了它。

此功能已添加到Vuetify 3。您需要使用v-img错误插槽。在下面的示例中，提供的第一个源图像中有一些拼写错误，因此将使用包含在错误槽中的第二个源。

<v-img src="https://pisum.phots/500/300?imige=4">
  <template v-slot:error>
    <v-img src="https://picsum.photos/500/300?image=5"></v-img>
  </template>
</v-img>