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

【问题标题】：nuxt.js - how to set css background image dynamicalynuxt.js - 如何动态设置css背景图片
【发布时间】：2018-01-25 05:07:56
【问题描述】：

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

【问题讨论】：

标签： javascript css vuejs2 nuxt.js

【解决方案1】：

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

基本上，在组件中做：

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

【讨论】：

请注意，这不是 Nuxt 特有的，它只是一个 Vue 模板约定，用于将数据值绑定到 HTML 元素的样式属性。

【解决方案2】：

这也是另一个使用 require 和 url 组合来解析资产的示例。

   <b-col cols="8" class="hj_projectImage justify-content-center text-center" :style="{backgroundImage: `url(` + require(`~/assets/ProjectPictures/${this.ProjectPicture}`) + `)`}">
  </b-col>

【讨论】：

【解决方案3】：

<template>
  <div>
    <div class="backgroundImage" :style="{ backgroundImage: `url(${backgroundImagePath})` }">
  </div>
</template>

<script>
import backgroundImagePath from '~/assets/image.jpeg'
export default {
  data() {
    return { backgroundImagePath }
  }
}
</script>

【讨论】：

添加口头解释通常很有帮助

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

你可以正常写但是在'': 'background-image'

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

【讨论】：

【解决方案6】：

官方文档已经提供了解决方案，见：https://nuxtjs.org/docs/2.x/directory-structure/assets#images

您需要做的就是删除斜线：

background-image: url("~assets/autumn-tree.jpg");

对于真正动态的图像，例如${image}.jpg:

<img :src="require(`~/assets/img/${image}.jpg`)" />

【讨论】：

【解决方案7】：

总的来说我推荐使用nuxt-image

您可以在此处定义每个分辨率的图像（媒体查询）。使用$img-feature，您还可以将其定义为背景图像：

export default {
  computed: {
    backgroundStyles() {
      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })
      return {
        backgroundImage: `url('${imgUrl}')`
      }
    }
  }
}

【讨论】：