Vue为div标签设置assets内本地背景图片的实现方法

src/
  assets/
    images/
      bg.jpg         # 背景图片
  components/
    MyComponent.vue
  App.vue

<template>
  <div 
    class="bg-div" 
    :style="{ 
      backgroundImage: `url(${require('@/assets/images/bg.jpg')})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    }"
  >
    内容区域
  </div>
</template>

<style scoped>
.bg-div {
  width: 100%;
  height: 400px; /* 设置高度以显示背景 */
}
</style>

<template>
  <div class="bg-div" :style="{ backgroundImage: `url(${bgImage})` }">
    内容区域
  </div>
</template>

<script>
// 引入图片（等价于 require 方式）
import bgImage from '@/assets/images/bg.jpg';

export default {
  data() {
    return {
      bgImage // 直接使用导入的路径
    };
  }
};
</script>

<style scoped>
.bg-div {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
}
</style>

<template>
  <div class="bg-div">内容区域</div>
</template>

<style scoped>
.bg-div {
  width: 100%;
  height: 400px;
  /* ~@ 表示 src 目录，是 Vue 约定的别名 */
  background-image: url(~@/assets/images/bg.jpg); 
  background-size: cover;
  background-position: center;
}
</style>

<style scoped>
.bg-div {
  background-image: url('@/assets/images/bg.jpg'); /* 部分工具需加 ~ */
}
</style>

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

<script>
export default {
  methods: {
    getBgImage() {
      // 根据条件返回不同图片路径
      return this.isLogin ? require('@/assets/login-bg.jpg') : require('@/assets/home-bg.jpg');
    }
  }
};
</script>

.bg-div {
  width: 100%;
  height: 300px; /* 必须设置高度或内容撑开容器 */
}

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 定义 @ 指向 src 目录
    },
  },
});

<template>
  <div class="page-bg">
    <h1>欢迎来到 Vue 项目</h1>
  </div>
</template>

<script>
// 导入图片（可选，也可直接在 CSS 中引用）
import bgImg from '@/assets/images/bg.jpg';

export default {
  data() {
    return {
      imgPath: bgImg // 可用于动态绑定
    };
  }
};
</script>

<style scoped>
.page-bg {
  /* 方式 1：CSS 直接引用 */
  background-image: url(~@/assets/images/bg.jpg);
  
  /* 方式 2：通过 data 绑定 */
  /* background-image: url(${imgPath}); */
  
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-attachment: fixed; /* 背景固定 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
}
</style>