正如注解中突出显示的Max Martynov，您应该使用url('~@/assets/image.svg')。
Webpack在解析资产时有一些特定的规则[1]。
为了解析别名（@），正如您正在使用的那样，Webpack必须将请求作为模块请求处理。使用前缀~强制webpack将请求视为模块请求，类似于require('some-module/image.svg')。

参考资料

1. https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules

我建议使用风格绑定。我发现这个链接真的很有用。
这里是一个使用引导卡的示例

<div
      class="card-image"
      :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">

该图像位于src/assets/images/cards. jpg中

确保图像扩展名为小写。如果图像有大写扩展名，请将其更改为小写，否则将不起作用。

<style lang="scss">
  .section{
    background-image: url('~@/assets/photos/DSC08611.jpg'); //WORKED!
    background-image: url('~@/assets/photos/DSC08611.JPG'); //DID NOT WORK
  }

</style>

这就是我的工作。

<div
  class="image"
  v-for="(image, imageIndex) in slideshow"
  :key="imageIndex"
  :style="{ backgroundImage: 'url(' + require(`@/assets/${image}`) + ')', width: '300px', height: '200px' }"
></div>

slideshow看起来像：

data() {
      return {
        slideshow : [
          "MyImages/1.png",
          "MyImages/2.png"
        ]
      }

对我起作用的是以下几点：
1.将所需图像移动到公用文件夹（myapp/public/assets/myimage.png）
1.构建项目。这会将资源从public文件夹移动到dist文件夹。
npm run build
1.现在你可以像这样在组件中使用你的图像：

<div :style="{background: 'url(' + '\'/assets/myimage.png\'' + ') no-repeat 0 3px'}"  ></div>

如果您的vuejs使用file-loader，您将利用import。

<template>
  <div class="container"></div>
</template>

import image from @/assets/image.svg
<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url(image);
}
</style>

如果你使用的是Vue 3（TypeScript）和Vite 3.2+，在你的vite.config.ts中，按如下所示适当地设置你的base。

import { defineConfig } from 'vite';

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
});

• base选项用于指定应用程序的基础URL，并自动处理资产路径的解析。*

然后，如果你的图像，img.jpg，在public/images文件夹中，你可以在你的css中引用它：

background-image: url('/images/img.jpg');

在为生产而构建时，将解决以下问题：

background-image: url('/subfolder/images/img.jpg');