帶有“OR”語句的動態 img src URL 在 NUXT 組件中無法正常工作

Question

我正在嘗試根據提供給組件的道具動態渲染圖像 src 路徑，並在資產文件夾中不存在該圖像時提供后備路徑。 這是我的圖片標簽：

<img 
  :src="require(`@/assets/${project.image || 'day-1.jpg'}`)" 
  alt="project image"
  class="rounded-xl row-span-3 col-span-1"
>

對於站點上此組件的第一個實例， {project.image}應該（並且確實）提供來自商店的正確圖像文件名： gfs.jpg （文件樹中不存在的圖像）

在這種情況下，我上面的代碼不應該告訴 Webpack 渲染day-1.jpg圖像，因為|| 或正在使用運算符，因為gfs.jpg文件？

Webpack 拋出錯誤Cannot find module './gfs.jpg' with error code 500

我還嘗試使用@error標記從methods: {} ，但在發生此錯誤時不會觸發。

Answer 1

|| 運算符不捕獲異常，當require d URL 不存在時會發生這種情況。

實現該功能的一種方法是使用處理require錯誤的方法或計算道具，默認為day-1.jpg ：

<template>
  <img :src="imgUrl">
</template>

<script>
export default {
  props: {
    project: Object
  },
  computed: {
    imgUrl() {
      try {
        return require(`@assets/${this.project?.image}`)
      } catch (e) {
        return require('@/assets/day-1.jpg')
      }
    }
  }
}
</script>

Answer 2

這就是我的寫法：

<template>
  <div>
    <img :src="require(`@/assets/${chosen}`)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      project: {
        image: 'gfs.jpg', // test this with '' (empty string)
      }
    }
  },
  computed: {
    chosen() {
       // optional chaining (?.) could be a nice fallback for your project
      return this.project?.image || 'day-1.jpg'
    },
  },
}
</script>

如果您弄錯了某些圖像或您的服務器刷新得太快，您可能會在控制台中出現一些奇怪的錯誤，最快的方法是重新啟動服務器。

另外，可以在這里找到更多答案： Vue.js 動態圖像不工作