nuxt.js - 如何动态设置 css 背景图片

Question

我正在使用 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>

原文由 Magick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 https://github.com/nuxt/nuxt.js/issues/2123 上找到了答案。

基本上，在组件中做：

 <div :style="{ backgroundImage: `url(${backgroundUrl})` }">Content with background here</div>

原文由 Magick 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

我犯了同样的错误，认为这是一个 nuxtjs 问题。 Webpack 使用语法来解析资产。

~ 强制 webpack 将请求视为模块请求。然后@从根目录开始。

原文由 Quickee 发布，翻译遵循 CC BY-SA 4.0 许可协议