javascript VueJS v-bind：style for background-image：url()

bvjxkvbb 于 2023-05-27 发布在 Java

关注(0)|答案(5)|浏览(198)

根据VueJS文档：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
我尝试了几种模式：

<div v-bind:style="{ background-image: url(item.img), }"></div>

<div v-bind:style="{ 'background-image': url('item.img'), }"></div>

<div v-bind:style='{ backgroundImage: "url(item.img)", }'></div>

但是结果对于HTML style属性无效。
有什么想法吗

JavaScript

来源：https://stackoverflow.com/questions/40666716/vuejs-v-bindstyle-for-background-image-url

5条答案

按热度按时间

hc8w905p1#

在尝试了其他模式之后，这是一个有效的模式：
<div v-bind:style='{ backgroundImage: "url(" + item.img + ")", }'></div>
结果：
<div style='{ background-image: url("/img/path/img.jpg"), }'></div>

赞(0）回复(0）举报 2023-05-27

apeeds0o2#

基于@T.Abdullaev的回答，这个带有额外双引号的回答对我有用。

v-bind:style='{ backgroundImage: `url("${imgUrl}")` }'

赞(0）回复(0）举报 2023-05-27

xjreopfe3#

这样做。它也适用于模板。

<div :style='{ backgroundImage: `url(${item.img})` }'></div>

赞(0）回复(0）举报 2023-05-27

4xy9mtcn4#

对我来说，这似乎工作得很好：

:style="{
      'background-image': 'url(' + require(`../assets/img/${imageName}`) + ')'
  }"

由于我所有的图片都在assets文件夹中，因此可以使用上述模式访问这些图片。

赞(0）回复(0）举报 2023-05-27

eiee3dmh5#

使用computed属性工作得很好，而且更简洁：

computed: {
     imageUrl: function() {
         return 'url('+ this.path + ')';
     }
},

赞(0）回复(0）举报 2023-05-27

我来回答

javascript VueJS v-bind：style for background-image：url()

5条答案

相关问题

热门标签

最新问答