为什么背景图不显示？

Question

我想制作一个游戏，你必须翻牌才能露出背面，但我无法显示背景图像。 我还是 vue 的新手，所以我不知道我是否做了一些愚蠢的事情。 我认为这与我通过脚本添加背景有关。

这是 App.vue：

<template>
  <div class="griglia">
    <Card num="1" path="../assets/squalo.png" />
    <Card num="2" path="../assets/squalo.png" />
    <Card num="3" path="../assets/squalo.png" />
    <Card num="4" path="../assets/squalo.png" />
    <Card num="5" path="../assets/squalo.png" />
    <Card num="6" path="../assets/squalo.png" />
    <Card num="7" path="../assets/squalo.png" />
    <Card num="8" path="../assets/squalo.png" />
    <Card num="9" path="../assets/squalo.png" />
  </div>
</template>

<script>
import Card from "./components/Card.vue"

export default {
  name: 'App',

  components: {
    Card,
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#7c00e1, #4f009e);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white;
}

div.griglia {
  width: 30vw;
  height: 30vw;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>

这是 Card.vue 组件：

<template>
    <div class="el">
        <div class="card" :id="'el'+num" @click="flip">
            <div class="front">{{num}}</div>
            <div class="back" :id="'b'+num"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        num: String,
        path: String
    },
    methods: {
        flip() {
            document.getElementById("b" + this.num).style = 'background-image: url("' + this.path + '"); background-size: cover'
            document.getElementById("el" + this.num).style = "transform: rotateY(180deg);"
        }
    }
};
</script>

<style scoped>
div.el {
  width: 30%;
  height: 30%;
  cursor: pointer;
  position: relative;
}

div.card {
  box-shadow: 0 0 15px black;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

div.front {
  position: absolute;
  background-color: #111111;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3.5vw;
  backface-visibility: hidden;
}

div.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-image: none;
}
</style>

Answer 1

document.getElementById("b" + this.num).style = 'background-image: url("' + this.path + '"); 是不正确的。

这将产生typeerror 。

请改用document.getElementById("b" + this.num).style.backgroundImage = 'url("' + this.path + '")' 。

在这里查看更多

Answer 2

我已经能够通过更改“squalo.png”之类的路径并在最终的 dist 文件夹中添加 png 文件来显示它。 可能不是最好的方法，但它确实有效。