Vue: 如何通过v-bind:style动态生成背景图？

Created on 16 Feb 2016 · 14Comments · Source: vuejs/vue

在通过v-for出来子集之后，要生成当前节点的背景图，通过v-bind:style="{background:url(list.Cover)}"
无法正确便利出结果.
请尤大大解答下，谢谢

Source

For-me

Most helpful comment

大致这样

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

hanai on 16 Feb 2016

👍26 👎5 ❤1

All 14 comments

大致这样

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

hanai on 16 Feb 2016

👍26 👎5 ❤1

@hanai 如果我这里的背景图是类似于"http://sss.xxxx"域下的图片。直接这样绑定是不是就是失败的？
现在我已经改成你说的那个样子，但是div中根本没行内样式引入

For-me on 16 Feb 2016

@hanai 代码如下<template> <div class="card" v-bind:class="{'card-1':$index%4==1||$index%4==2,'card-top':$index == 2}" v-for="item in data" v-bind:style="{backgroundImage:item.Cover}"> </div></template>

For-me on 16 Feb 2016

'url(' + item.Cover + ')'... 只有 item.Cover 当然报错

yyx990803 on 16 Feb 2016

👍9 👎2

@yyx990803 尤大大，如果要在这里面用三元表达式，应该怎么处理呢？常规方法会抛异常。

For-me on 17 Feb 2016

code：
div class="swiper-slide" v-for="slide in fields.slides">

            <!--<img v-bind:data-src="slide.img" :alt="slide.title" class="swiper-lazy"/>-->
            <!--<img v-bind:data-src="slide.img" :alt="slide.title" class="swiper-lazy"/>-->
            <div  v-bind:style="background-image: url(slide.img);"></div>

err msg：

vue.js?bust=1480478486341:2643 [Vue warn]: failed to compile template:

Jiiiiiin on 30 Nov 2016

通过img标签直接绑定图片是可以的，但是绑定成bi就失败了。

Jiiiiiin on 30 Nov 2016

这样成功了 = =。。。。

Jiiiiiin on 30 Nov 2016

@Jiiiiiin
:style="background-image: 'url(' + slide.img + ')';"

leafiy on 2 Aug 2017

如果这种写法，后面再添加样式的话，会报错呢，写法：
:style="{background: 'url(' + techContain.bgSrc + ')',backgroundSize :100% }"

已解决，100%要加引号，尴尬

Lawrence51 on 2 Mar 2018

:style="`background-image: url(${list.Cover})`"

chensiun on 19 Nov 2018

👍10

绑定background:linear-gradient（xxxxx）呢

dingguoqing513 on 29 Jul 2019

:style="{backgroundImage:url(${gift.reward_pic}), color: 'red'}"
如果多个属性的话这样写

JustDoIt521 on 30 Oct 2019

What it is?

2019-10-30, tr, 14:16 JustDoIt521 notifications@github.com rašė:

:style="{backgroundImage:url(${gift.reward_pic}), color: 'red'}"
如果多个属性的话这样写

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/2352?email_source=notifications&email_token=AHPQOYDSX4QOEWYCLPMJG3TQRF3IZA5CNFSM4B3L4LJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECT5W6A#issuecomment-547871608,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHPQOYAX2Q2FDMGIT4RMKQDQRF3IZANCNFSM4B3L4LJQ
.