I've tried every combination that was given in the answers throughout the different sites. Here's my code.
<div class="circular" v-bind:style="{ 'background-image': 'url(' + require('../assets/kafa.jpg') + ')' }"></div>
The problem is (I think) that path is good, and image is found, it just won't show on the background (or anywhere for that matter).
And here is the image of the page and Inspect Elements
Thanks.
On
According to vue documentation: https://v2.vuejs.org/v2/guide/class-and-style.html in the section of “Binding Inline Styles” and “Object Syntax” it describes that you could define peroperty-values of styles in the “data” part of “vue instance”. This is what I was doing for implementing that:
new Vue ({
el: "#app",
data: {
activeColor: "red",
backImg: 'url("galaxy.jpg")'
}
});.circular {
min-height: 1080px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="circular" v-bind:style="{color: activeColor, backgroundImage: backImg}"> texts to show styles</div>
</div>
<script src="vue.js"></script>
<script src="myScript.js"></script>
</body>
</html>I used the “camelCase” format and the image is something different, you can substitute your own “url” in the “data” part of “vue instance” in the script code. I could not upload my used image, but you could test your own image.
Okay, so I found the problem. I closed the tag in the same line, instead of wrapping whole template in that div.