Vue: v-bind:style 'background-image' error: url is not a function

[heziqiang]

<template>
<div :style="{ 'background-image': url ( backgroundImage ) }">
</template>
<script>
data: {
  backgroundImage: 'http://image.com/image.png',
}
</script>

// TypeError: scope.url is not a function

[ghost]

You can use <div :style="{ 'background-image': 'url(' + backgroundImage + ')' }"> instead.
ref:2352
example: jsbin

[GreenMelon]

it do work and help me out! THX

[jhonny111s]

works for me,
in controller:

getUrlMap: function () { var url = "IMage or google map" return { 'background-image': 'url("' + url + '")' } }

in html:
<div class="img" :style="getUrlMap()"></div>

[heziqiang]

Thanks

[kamil-kielczewski]

@jhonny111s your answer work for non-local url - thanks :)

[nizamdev]

:style='{ backgroundImage: "url(" + imgUrl + hotel.image.name + ")", }'

define imgUrl on data function

[mohammadnazari110]

<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>

[shepelevstas]

How do I do it in cli generated app that dynamically gets user imgs names from the server and can not be required in advance with 'url(' + require('./assets/media/baner1.jpg') + ')'?
<div :style="{ 'background-image': 'url(' + backgroundImage + ')' }"> works in html's inline template, but not in .vue's template.
I mean I need smth like :style="{'background-image': 'url('+user.img+')'}" which is not working
It always says url is not defined. I guess it's not defined in a .vue file. But shouldn't it just render 'url(' as a string value of background-image style property? Why it tries to run it as a function?
Oh! That's because I tried to add url function to methods $))
I've fond my solution: :style="{'background-image':'url(\'/'+user.img+'.jpg\')'}"!!!=)) Thank you!!! %)))

[Shujee]

What if my background is a gradient (linear-gradient) instead of an image? I'm basically trying to use a style where I could change element background color dynamically.

[neberaa]

What about template literals? Something like:
<div :style="{'background': `linear-gradient(#e66465, ${color_variable});`}"

[Alinawaz-786]

I need your help when i was using the vue js get following error

app.js:106867 [Vue warn]: Error in v-on handler: "ReferenceError:
stripeResponseHandler is not defined"

found in

---> at
resources/js/components/MessagePackagesList.vue
at
resources/js/components/CreditDetailComponent.vue

warn @ app.js:106867
logError @ app.js:108126
globalHandleError @ app.js:108121
handleError @ app.js:108081
invokeWithErrorHandling @ app.js:108104
invoker @ app.js:108421
original._wrapper @ app.js:113774
app.js:108130 ReferenceError: stripeResponseHandler is not defined
at VueComponent.stripeResponse (app.js:4295)
at invokeWithErrorHandling (app.js:108096)
at HTMLFormElement.invoker (app.js:108421)
at HTMLFormElement.original._wrapper (app.js:113774)
logError @ app.js:108130
globalHandleError @ app.js:108121
handleError @ app.js:108081
invokeWithErrorHandling @ app.js:108104
invoker @ app.js:108421
original._wrapper @ app.js:113774
(index):3 Uncaught Error: Your key is invalid, as it contains whitespace.
For more info, see https://stripe.com/docs/stripe.js
at Function.b.validateKey ((index):3)
at Function.b.create ((index):2)
at Function.c.createToken ((index):2)
at HTMLFormElement. (app.js:4222)
at HTMLFormElement.dispatch (app.js:22950)
at HTMLFormElement.elemData.handle (app.js:22757)

how to solved thie error

On Wed, 6 Nov 2019 at 17:40, neberaa [e-mail] wrote:

What about template literals? Something like:

—
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/2514?email_source=notifications&email_token=ANGDLPF7L5ZBDJRT3FZF7M3QSK3K5A5CNFSM4B6RNVHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDGMGPQ#issuecomment-550290238,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANGDLPE7G3CYSAYWAHROHXDQSK3K5ANCNFSM4B6RNVHA
.

[VishalBty]

My workaround is to add the following method
methods: { url(value) { return "url("+value+")" } }