Estoy tratando de enlazar el src de una imagen en un elemento, pero no parece funcionar. Me estoy poniendo un «no Válido de expresión. Generado cuerpo de la función: { backgroundImage:{ url(imagen) }».

La documentación dice que el uso de cualquiera de ‘Kebab-caso’ o ‘camello-caso’.

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

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

InformationsquelleAutor CosX | 2016-02-06

7 Comentarios

  1. 135

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

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

    He aquí una versión simplificada de violín que de trabajo: https://jsfiddle.net/89af0se9/1/

    Re: el comentario de abajo acerca de kebab caso, esta es la forma en que usted puede hacer que:

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

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

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

    Usted debe asegurarse de que su image valor es citado de manera que el extremo de cadena resultante es:

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

    De lo contrario, si su URL de la imagen tiene caracteres especiales (como los de espacio en blanco o paréntesis) el explorador no puede aplicarla correctamente. En Javascript, la asignación de aspecto:

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

    o

    this.image = "'" + myUrl + "'"

    Técnicamente, esto se podría hacer en la plantilla, pero el escape sea necesario para mantenerla válida HTML no vale la pena.

    Más info aquí: Es de citar que el valor de url() realmente necesario?

    • de marzo de 2016, también se debe camel case (backgroundImage) no kebab caso (background-image) aunque los médicos dicen que puede ser.
    • Si alguien es un tonto como yo, que podría haber hecho backgroundImage: image en lugar de backgroundImage: 'url('+image+')'. Tengo tan colgó en la vue de la sintaxis que me olvidé de la url().
    • Dentro de un Vue componente, que trabajó para mí sólo para decir v-bind:style="{ 'background-image': url(image) }", pero fuera de un componente (sólo en una página normal) es que parece necesario poner la url entre comillas. ¿Alguien sabe por qué puede ser?
    • no tiene sentido que se ha trabajado a menos que usted tenía una función llamada «url» que ha producido la cosa correcta en el ámbito correspondiente. Se puede poner un violín juntos que demuestra es?
    • Creo que lo que hay en realidad era un método de dirección url que me escribió y me olvidé, y que hace exactamente lo que yo esperaba… que es bastante gracioso. Realmente no puedo probarlo en un violín debido a la Vue componentes de estar en archivos separados, pero estoy seguro de que era lo que estaba causando el comportamiento extraño después de todo. Gracias!
  2. 12
    <div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>
    • Este trabajó para mí. Gracias.
    • bien por ti:))
  3. 2

    Unión estilo de imagen de fondo usando un dinámica valor de v-para bucle podría ser hecho como este.

    <div v-for="i in items" :key="n" 
      :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
    </div>
    • Lo siento mucho, no recuerdo clic en el downvote botón. Debe de haber sucede por accidente. Deshecho.
    • no se preocupe.
  4. 1

    Otra solución:

    <template>
      <div :style="cssProps"></div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            cssProps: {
              backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
            }
          }
        }
      }
    </script>

    Lo que hace que esta solución sea más conveniente?
    En primer lugar, es más limpio. Y entonces, si usted está utilizando Vue CLI (supongo que sí), puede cargar por webpack.

    Nota: no olvides que require() es siempre relativa a la actual ruta de acceso del archivo.

  5. 0

    Para un solo repite componente de esta técnica funciona para mí

    <div class="img-section" :style=img_section_style >

    computed: {
                img_section_style: function(){
                    var bgImg= this.post_data.fet_img
                    return {
                        "color": "red",
                        "border" : "5px solid ",
                        "background": 'url('+bgImg+')'
                    }
                },
    }
  6. 0

    He experimentado un problema por el que las imágenes de fondo con espacios en el nombre del archivo donde causando el estilo para que no se aplica. Para corregir esto, yo tenía para garantizar la cadena de ruta de acceso se encapsula en una sola cita.

    Nota el escape \ » en mi ejemplo a continuación.

    <div :style="{
        height: '100px',
        backgroundColor: '#323232',
        backgroundImage: 'url(\'' + event.image + '\')',
        backgroundPosition: 'center center',
        backgroundSize: 'cover'
        }">
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here