NuxtJs 访问资产文件夹中的本地图像

Question

我认为这是一个简单的问题，但不明白为什么会失败。 我正在尝试在 nuxt assets 文件夹中获取本地图像。

我的猜测是我在字符串中执行“~”，这就是原因，但我似乎无法加载图像。

我尝试使用以下代码访问我的 nuxt 项目中的本地图像：

<template>
  <div class="background-image" :style="`background-image: url(${imageSource})`">
  </div>
</template>

这是我的脚本：

<script>
export default {
  data() {
    return {
      defaultCoverImage: '~/assets/images/covers/default-cover.jpeg',
    }
  },
  computed: {
    imageSource() {
      if(this.src.match(/\.(jpeg|jpg|gif|png)$/)) {
        return this.src;
      }
      return this.defaultCoverImage;
    }
  }
};
</script>

图像未正确显示或加载。请检查下面的文件夹结构。 红线是根文件夹。

Answer 1

这个答案可能会有所帮助：https://stackoverflow.com/a/68095775/8816585

还有，应该够了

<div :style="{ backgroundImage: `url(${require('~/assets/images/covers/default-cover.jpeg')})`}">
</div>

Answer 2

对于可能有同样问题的其他人，这就是我解决它的方法（下面是 Kissus 答案的灵感：

data() {
    return {
      defaultCoverImage: require('~/assets/images/covers/default-cover.jpeg'),
    }
  }