Vue.js中设置页面70%背景图片显示空白问题求助

你的背景图片显示空白主要是内联样式语法错误，加上Vue项目中资源引用方式的问题，以下是具体修复方法：

方法一：使用Vue动态样式绑定（推荐，适配Vite/Webpack） #

直接导入图片资源，通过:style绑定样式，避免语法错误：

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
// 导入背景图片，Vite/Webpack都会自动处理路径
import bgImage from '../assets/bg.png';
</script>

<template>
  <div :style="{ backgroundImage: `url(${bgImage})`, height: '70vh' }" class="full-width-image"></div>
  <div class="container">
    <div class="row">
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col">
        <h1>Test</h1>
        <p>test test test!</p>
      </div>
    </div>
  </div>
</template>

<style>
.full-width-image {
  margin: auto;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

方法二：修正内联样式语法（仅适配Webpack环境） #

如果你的项目用Webpack构建，可直接修正style属性内的引号错误：

<template>
  <!-- 把原代码中的反引号换成单引号，HTML属性内不能用反引号 -->
  <div style="background-image: url('${require('../assets/bg.png')}'); height: 70vh" class="full-width-image"></div>
  <div class="container">
    <!-- 其他内容不变 -->
  </div>
</template>

额外检查项 #

1. 确认图片路径正确：../assets/bg.png要对应实际文件位置，比如组件在src/views目录下，assets在src/assets下，这个路径是正确的；如果组件层级不对，要调整路径。
2. 检查图片文件是否存在：确保bg.png确实在assets文件夹中，文件名和后缀没有拼写错误。

内容的提问来源于stack exchange，提问作者Clyon97