我正在使用Nuxt.js,并具有一个自定义组件。
该组件中的css使用css设置背景图像。
我尝试了以下操作,但是运行此程序时出现错误。错误是:
invalid expression: Invalid regular expression flags in
零件
<template>
<section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
<div class="">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ result }}
</h1>
<h2 class="subtitle ">
Hero subtitle
</h2>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
props: ['result', 'image']
}
</script>
<style>
.bg-img {
background-image: url(~/assets/autumn-tree.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
</style>
我在https://github.com/nuxt/nuxt.js/issues/2123上找到了答案。
基本上,在组件中执行以下操作: