nuxt.js - 如何动态设置 css 背景图片 [英] nuxt.js - how to set css background image dynamicaly
本文介绍了nuxt.js - 如何动态设置 css 背景图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 Nuxt.js，并且有一个自定义组件.
该组件在使用 css 设置背景图像的组件中有 css.
我已经尝试了以下操作，但在运行时出现错误.错误是:
invalid expression: Invalid regular expression flags in组件
<section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"><div class=""><div class="hero-body"><div class="容器"><h1 class="title">{{ 结果 }}<h2 class="字幕">英雄副标题</节><脚本>导出默认{道具:['结果'，'图像']}<风格>.bg-img {背景图片:网址(~/assets/autumn-tree.jpg)；背景位置:居中；背景重复:不重复；背景附件:固定；背景尺寸:封面；背景色:#999；}</风格>
解决方案
我在 https://github.com/nuxt/nuxt.js/issues/2123.
基本上，在组件中做:
<div :style="{ backgroundImage: `url(${backgroundUrl})` }">这里有背景内容</div>Im using Nuxt.js, and have a custom component.
This component has css in the component that sets a background image using css.
I've tried the following but I get an error when I run this. The error is:
invalid expression: Invalid regular expression flags in
Component
<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>
解决方案
I found the answer on https://github.com/nuxt/nuxt.js/issues/2123.
Basically, in the component do:
<div :style="{ backgroundImage: `url(${backgroundUrl})` }">Content with background here</div>
这篇关于nuxt.js - 如何动态设置 css 背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
