Why isn't the background image showing?-CodePudding

I wanted to make a game where you have to turn cards in order to reveal the back, but I can't get the background image to show. I'm still new to vue so I don't know if I did something stupid. I think it has something to do with the fact that I add the background through a script.

This is the App.vue:

<template>
  <div >
    <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>

And this is the Card.vue component:

<template>
    <div >
        <div  :id="'el' num" @click="flip">
            <div >{{num}}</div>
            <div  :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>

CodePudding user response：

The document.getElementById("b" this.num).style = 'background-image: url("' this.path '"); is incorrect.

This will produce typeerror.

Use document.getElementById("b" this.num).style.backgroundImage = 'url("' this.path '")' instead.

Check more here

CodePudding user response：

I've been able to get it to show by changing the path like "squalo.png" and adding the png file in the final dist folder. Probably not the best way to do it but it works.