javascript - vuejs - vue style image

Vue.js data-bind style backgroundImage no funciona

Question

Estoy tratando de vincular el src de una imagen en un elemento, pero parece que no funciona. Me aparece una "Expresión no válida. Cuerpo de la función generada: {backgroundImage: {url (image)}".

La documentation dice que se debe usar ''Kebab-case'' o ''camel-case''.

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

Aquí hay un violín: https://jsfiddle.net/0dw9923f/2/

Answer 1

El problema es que el valor para backgroundImage debe ser una cadena como esta:

<div class="circular" v-bind:style="{ backgroundImage: ''url('' + image + '')'' }"></div>

Aquí hay un violín simplificado que funciona: https://jsfiddle.net/89af0se9/1/

Re: el comentario a continuación sobre kebab-case, así es como puedes hacer eso:

<div class="circular" v-bind:style="{ ''background-image'': ''url('' + image + '')'' }"></div>

En otras palabras, el valor para v-bind:style es solo un objeto de Javascript simple y sigue las mismas reglas.

ACTUALIZACIÓN: Otra nota acerca de por qué puede tener problemas para que esto funcione.

Debes asegurarte de que el valor de tu image sea ​​citado para que la cadena resultante final sea:

url(''some/url/path/to/image.jpeg'')

De lo contrario, si la URL de su imagen tiene caracteres especiales (como espacios en blanco o paréntesis), es posible que el navegador no la aplique correctamente. En Javascript, la tarea se vería como:

this.image = "''some/url/path/to/image.jpeg''"

Técnicamente, esto podría hacerse en la plantilla, pero el escape requerido para mantenerlo en HTML válido no vale la pena.

Más información aquí: ¿Es realmente necesario citar el valor de url ()?

Answer 2

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

Answer 3

:style="{ backgroundImage: `url(''${src}'')` }"