我在https://github.com/nuxt/nuxt.js/issues/2123上找到了答案。
基本上，在组件中：

<div :style="{ backgroundImage: `url(${backgroundUrl})` }">Content with background here</div>

字符串

第一个月
我犯了同样的错误，以为这是一个nuxtjs的问题。Webpack使用语法来解析资源。
~强制webpack将请求视为模块请求。然后@ start at root。

这也是使用require和url组合解析资产的另一个示例。

<b-col cols="8" class="hj_projectImage justify-content-center text-center" :style="{backgroundImage: `url(` + require(`~/assets/ProjectPictures/${this.ProjectPicture}`) + `)`}">
  </b-col>

字符串

<template>
  <div>
    <div class="backgroundImage" :style="{ backgroundImage: `url(${backgroundImagePath})` }">
  </div>
</template>

<script>
import backgroundImagePath from '~/assets/image.jpeg'
export default {
  data() {
    return { backgroundImagePath }
  }
}
</script>

字符串

你可以正常地写它，但在''中：'background-image'

v-bind:style="{ 'background-image': 'url(' + api.url + ')' }"

字符串

总的来说，我建议使用nuxt-image
在那里，您可以定义每个分辨率的图像（媒体查询）。使用$img-feature，您还可以将其定义为background-image：

export default {
  computed: {
    backgroundStyles() {
      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })
      return {
        backgroundImage: `url('${imgUrl}')`
      }
    }
  }
}

字符串

所以，require在我的Nuxt 3 w/ Vite应用程序中不起作用，我得到了“require未定义”的讨厌的500错误。
这是我在父页面中使用import并通过props传递的解决方案：
父组件：

<template>
  <div class="flex flex-col h-screen">
    <NavHeader />
    <HeroPage
      :pageImage="pageImage"
    />
    <NavFooter />
  </div>
</template>

<script>
//Import the banner image.
import pageImage from "~/assets/banner/page-banner-about-us.jpg";

export default {
  data() {
    return {
      pageImage: pageImage
    };
  },
};
</script>

字符串
子组件：

<template>
  <div
    class="mx-auto relative block w-[1200px] top-0 z-10 overflow-hidden mt-0 mb-0 bg-cover py-16 rounded-b-lg"
    :style="bgImage"
  >
  </div>
</template>

<script>
export default {
  props: {
    pageImage: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      bgImage: {
        "background-size": "cover",
        "background-image": `url(${this.pageImage})`,
      },
    };
  },
};
</script>

型

官方文档已经提供了解决方案，请参阅：https://nuxtjs.org/docs/2.x/directory-structure/assets#images
你需要做的就是删除斜线：

background-image: url("~assets/autumn-tree.jpg");

字符串
对于真正的动态图像，例如${image}.jpg：

<img :src="require(`~/assets/img/${image}.jpg`)" />

型