背景图片未显示 vue.js

Question

我已经尝试了不同网站答案中给出的所有组合。这是我的代码。

<div class="circular" v-bind:style="{ 'background-image': 'url(' + require('../assets/kafa.jpg') + ')' }"></div>

问题是（我认为）路径很好，找到了图像，它只是不会显示在背景上（或任何地方）。

And here is the image of the page and Inspect Elements

谢谢。

Answer 1

According to vue documentation: https://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.

Answer 2

好的，所以我找到了问题所在。我在同一行中关闭了标签，而不是将整个模板包装在 div.

中

背景图片未显示 vue.js

background image not showing vue.js

html

css

background

background-image

vue.js