【问题标题】: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>
    

    更多信息: https://next.vuetifyjs.com/en/components/navigation-drawers/#navigation-drawer

    【讨论】:

      猜你喜欢
      • 2016-02-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-05
      • 2022-01-09
      • 1970-01-01
      • 2018-10-16
      • 1970-01-01
      相关资源
      最近更新 更多