为什么背景图不显示？答案

【问题标题】：Why isn't the background image showing?为什么背景图不显示？
【发布时间】：2022-01-11 16:57:38
【问题描述】：

我想制作一个游戏，你必须翻牌才能露出背面，但我无法显示背景图像。我还是 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>

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

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

这将产生typeerror。

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

查看更多here

【讨论】：

仍然没有显示背景：/
@user15432248，this path 是什么？我认为这可能是网址的问题。你能给我一个this path的例子吗？
当然，它在 App.vue ("../assets/squalo.png") 中。 App.vue、assets和components在同一个文件夹下，而Card.vue和squalo.png分别在components和assets文件夹下。

【解决方案2】：

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

【讨论】：