Tengo esto en mi plantilla Vue.js:
<img src="/media/avatars/{{joke.avatar}}" alt="">Está dentro de un bucle que hace bromas. Otros campos se representan bien, pero para la imagen aparece este error en la consola:
- src="/media/avatars/{{joke.avatar}}": se ha eliminado la interpolación dentro de los atributos. Utilice v-bind o la abreviatura de dos puntos en su lugar. Por ejemplo, en lugar de , use .
También uso v-bind:src="... , pero obtengo un error de expresión no válida .
¿Cómo puedo arreglar esto?
Prueba esto:
<img v-bind:src="'/media/avatars/' + joke.avatar" />No olvide comillas simples alrededor de su cadena de ruta. También en sus datos, verifique que tenga una variable de imagen definida correctamente.
joke: { avatar: 'image.jpg' }Una demostración funcional está aquí: http://jsbin.com/pivecunode/1/edit?html,js,output