Estoy tratando de agregar una identificación tomada de una API al final de una URL de imagen para que sea una imagen diferente para cada tarjeta en el bucle. Sin embargo, creo que img-src podría aceptar exclusivamente una cadena y v-bind exclusivamente un atributo
<b-card class="sCardCourse m-3" v-bind:header="course.title" v-for="course in courses" :key="course.id" overlay img-src="https://picsum.photos/500/300/?image=26" img-alt="Card Image" header-class="text-center headHeight" > <div class="sbtn"> <b-button class="fbtn" :to="{ name: 'viewCourse', params: { id: course.id}}" variant="warning">View</b-button> <b-button :to="{ name: 'editCourse', params: { id: course.id}}" variant="warning">Edit</b-button> </div> </b-card>Lo intenté:
Agregarlo al final con solo un + (error que dice que + no se acepta)
Agregar {{course.id}} en lugar del número estático al final de la URL (error que dice que se eliminó la interpolación dentro de los atributos y que se usa v-bind o :id)
Usando v-bind: en img-src (error que dice que v-bind requiere un atributo).
Agregar {{v-bind:course.id}} al final (mismo error que solo {{course.id}})
¿Es posible con la propiedad img-src o tengo que hacerlo de otra manera?
Problema
El problema aquí es que con la directiva v-bind (abreviada por el signo de dos puntos), la línea entre esas comillas se analiza como Javascript. Esto significa que necesita un par diferente de comillas para representar una cadena y concatenarle una variable.
img-src="without v-bind this is just text" // OK :img-src="with v-bind this is javascript so it gives an error" // NOT OK :img-src="'with v-bind and single quotes this is a valid javascript string'" // OKSolución
Usando un literal de plantilla:
:img-src="`https://picsum.photos/500/300/?image=${course.id}`"Usando una cadena con concatenación:
:img-src="'https://picsum.photos/500/300/?image=' + course.id"