Why isn't the background image showing?

Question

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

And this is the Card.vue component:

<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

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

Answer 2

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.