如何在 Vue 文件中添加 css 背景图像？

【问题标题】：How do I add an css background image in a Vue file?如何在 Vue 文件中添加 css 背景图像？
【发布时间】：2020-12-27 23:41:48
【问题描述】：

我想用我拥有的图片替换导航抽屉(./src/assets/image.jpg)

  <v-navigation-drawer
    mini-variant
    dark
    app
    permanent
    class="withBackground"
  >
...
<style scoped>
.withBackground {
  background: rgba(-1, 0, 0, 0);
  background-image: // what here?;
}
</style>

我不知道要为background-image 设置什么。我应该通过import 加载图像并将其附加到data 字段然后将其放置在那里吗？

【问题讨论】：

标签： html vue.js vuetify.js

【解决方案1】：

您应该使用src 属性。

你可以这样做：

  <v-navigation-drawer
    mini-variant
    dark
    app
    permanent
    src="./src/assets/image.jpg"
  >

或者如果图像源是这样的变量：

<template>
  <v-navigation-drawer
    mini-variant
    dark
    app
    permanent
    :src="imageSrc"
  />
</template>

<script>
export default {
    data() {
        return {
          imageSrc: null
        };
    },
    mounted() {
      this.imageSrc = require('./src/assets/image.jpg')
    },
};
</script>

【讨论】：