背景图片未显示vue.js

问题描述

我已经尝试过在各个站点的答案中给出的每种组合。这是我的代码。

<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

谢谢。

解决方法

根据vue文档： https://vuejs.org/v2/guide/class-and-style.html 在“绑定内联样式”和“对象语法”部分中，它描述了您可以在“ vue实例”的“数据”部分中定义样式的性能值。这就是我为实现该目标所做的事情：

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>

我使用了“ camelCase”格式，并且图像有所不同，您可以在脚本代码的“ vue实例”的“数据”部分中替换您自己的“ url”。我无法上传使用过的图片，但是您可以测试自己的图片。

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

background background-image html vue.js

背景图片未显示vue.js

问题描述

解决方法

相关问答