为什么我用于背景的图像没有在我的vue.js项目中呈现？

Question

我创建了一个vue项目，我想将我的背景图像渲染到DOM。

这是代码

<template>
  <div>
    <div class="home">
      <h1>{{ message }}</h1>
      <div class="container  col-sm-6 col-sm-offset-4 col-md-4 col-md-offset-6 col-lg-5 col-lg-offset-6">
        <form class="" method="post">
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <input v-model="user.firstName" type="text" name="" value="" class="form-control  input-lg" placeholder="First Name" equired autocomplete="off" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <input type="text" name="" value="" class="form-control input-lg" placeholder="last Name" required autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <!-- Create a show/hide command above the password field -->
                <input v-model="user.email" type="email" name="" value="" class="form-control input-lg" placeholder="Enter Email">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <input v-model="user.password" type="password" name="" value="" class="form-control  input-lg" placeholder="Choose a password">
              </div>
            </div>
          </div>
        </form>
        <!-- User terms will be above the sign up button without the check box -->
        <input class="btn btn-info btn-lg" value="Sign Up" type="Submit" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'levi',
  data() {
    return {
      message: 'Chaos. Simplify it all',
      user: {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
      },
    };
  },

  methods: {
    register() {

    },
  },
};
</script>

<style >
h1 {
  font-size: 90px;
  text-align: center;
  font-family: Heiti SC;
  font-weight: bolder;
  line-height: 1em;
}

h1 {
  margin-top: 100px;
}

@media screen and (max-width: 534px) {
  .container {
    width: 98%;
  }

  .container {
    background: url("../assets/whiteCoffeedarken.jpg");
    repeat: 0 0;
  }
}
</style>

这是项目结构：

assets文件夹包含图像，levi.vue包含部分代码。

这是我运行代码时出现的错误的图像