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>
url('~@/assets/autumn-tree.jpg')
これがnuxtjsの問題だと思って同じ間違いをしました。 Webpackは構文を使用してアセットを解決します。
〜リクエストをモジュールリクエストとして扱うようにwebpackを強制します。そして、@はルートから開始します。
あなたはそれを普通に書くことができますが、 '': 'background-image'
v-bind:style="{ 'background-image': 'url(' + api.url + ')' }"