如何在Vue中设置动态背景图像

1hdlvixo 于 2023-03-31 发布在 Vue.js

关注(0)|答案(2)|浏览(279)

我想让我的导航栏动态。我想改变它的背景图片。
我试着这样做：

<b-navbar toggleable="lg"v-bind:style="headerStyle">
this.headerStyle = {
                    backgroundImage: 'url("../../assets/img/sky-views/3.png") !important'
                }

当我这样做并检查它时，我看到了这个：

而且没有图像，它找不到图像。
但是当我添加一个类到元素中并给类给予相同的路径时，它会显示图像。

<b-navbar toggleable="lg" class="header-wrapper">
...
    <style lang="scss">
    .header-wrapper {
            background-image: url("../../assets/img/sky-views/3.png") !important;
        }
    </style>

当我检查时，我看到：

我错过了什么？为什么结果路径不同？我如何正确地使它？

vue.js

来源：https://stackoverflow.com/questions/75881451/how-i-can-set-dynamic-background-image-in-vue

2条答案

按热度按时间

5jvtdoz21#

当Webpack编译Vue应用程序时，它知道将CSS url()路径转换为编译后的对应路径。然而，this.headerStyle只是Vue组件脚本中的一个任意对象变量：Webpack没有转换该URL的上下文。
在answer to a similar question中，建议使用require()函数来请求Webpack转换URL。特别是对于您的脚本，新变量看起来像这样：

this.headerStyle = {
  backgroundImage: `url("${require('../../assets/img/sky-views/3.png')}") !important`
}

在模板中，您将以完全相同的方式执行v-bind:style="headerStyle"。
请注意，输出将取决于构建的配置方式。在我的测试中，我在输出的style属性中默认获得了一个巨大的base64编码字符串（而不是资产的URL）。然而，最终的视觉结果是相同的。

赞(0）回复(0）举报 2023-03-31

zour9fqk2#

我发现的另一种方法是给予动态类名。

<b-navbar toggleable="lg"v-bind:class="headerClass">
...
this.headerClass= 'night'
...
.night {
            background-image: url("../../assets/img/sky-views/nightImage.png") !important;
        }
</style>

赞(0）回复(0）举报 2023-03-31

我来回答

如何在Vue中设置动态背景图像

2条答案

相关问题

热门标签

最新问答