Vue.js data-bind estilo BackgroundImage no funciona
Estoy tratando de enlazar el src de una imagen en un elemento, pero no parece funcionar. Tengo una expresión "inválida". Generated function body: { BackgroundImage:{ url(image)} "(en inglés).
La documentación dice usar 'Kebab-case' o 'camel-case'.
<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>
Aquí está un violín: https://jsfiddle.net/0dw9923f/2 /
3 answers
El problema es que el valor de 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 de v-bind:style es solo un objeto Javascript simple y sigue las mismas reglas.
ACTUALIZACIÓN: Otra nota sobre por qué puede tener problemas para que esto funcione.
Usted debe asegurarse su valor image se cita para que la cadena final resultante sea:
url('some/url/path/to/image.jpeg')
De lo contrario, si la URL de la 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 HTML válido no vale la pena.
Más información aquí: ¿Es realmente necesario citar el valor de url ()?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-30 13:15:51
<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-30 20:45:09
:style="{ backgroundImage: `url('${src}')` }"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-18 16:31:51