Vuetify 应用程序因 v-img 源要求语句失败而中断

Posted 2023-03-07

【中文标题】Vuetify 应用程序因 v-img 源要求语句失败而中断

【英文标题】：Vuetify application breaks upon failed v-img source require statement

【发布时间】：2022-01-05 09:59:36

【问题描述】：

假设我有v-img 组件，我想使用require() 语句渲染图像源。

<v-img :src="require(`@/some-folder/my-img.png`)"></v-img>

但是，如果我的文件夹中没有 my-img.png，我的应用程序就会完全中断。

到目前为止我已经尝试过：

<v-img :src="require(...) || require(...)"></v-img>

<v-img :src="require(...)">
   <template v-slot:placeholder>
      // placeholder component.
   </template>
</v-img>

<v-img :src="resolveHandler()"></v-img>

methods: 
   resolveHandler() 
      let image;
      try  ...  catch (error)  ...  finally  ... ;
      return image;
   

以上都不起作用。请问有什么建议吗？谢谢。

【问题讨论】：

这能回答你的问题吗？ Dynamic img src URL with "OR" statement not working properly in NUXT component

@kissu 不，try...catch 方法对我不起作用。

@kissu 实际上我的函数是一个承诺，它没有返回一个字符串值。我让它同步，现在它可以工作了。谢谢。

【参考方案1】：

试试这个

<template>
  <v-img :src="imageSrc">
    <template #placeholder>
      No image
    </template>
  </v-img>
</template>

<script>
export default 
  ...
  mounted() 
    try 
      this.imageSrc = require(...);
     catch (e) 
      this.imageSrc = null;
    
  ,
;
</script>