web-dev-qa-db-ja.com

nuxt.js-cssの背景画像を動的に設定する方法

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>
javascriptcssvuejs2nuxt.js
3
Magick

url('~@/assets/autumn-tree.jpg')

これがnuxtjsの問題だと思って同じ間違いをしました。 Webpackは構文を使用してアセットを解決します。

〜リクエストをモジュールリクエストとして扱うようにwebpackを強制します。そして、@はルートから開始します。

1
Quickee

あなたはそれを普通に書くことができますが、 ''： 'background-image'

v-bind:style="{ 'background-image': 'url(' + api.url + ')' }"
0
KitKit