¿Cómo puedo agregar una variable a un enlace de imagen en una tarjeta (vue-bootsrap)?

Estoy tratando de agregar un ID tomado de una API al final de la URL de una imagen para que sea una imagen diferente para cada tarjeta en el bucle. Sin embargo, creo que img-src puede aceptar exclusivamente una cadena, y v-bind exclusivamente un atributo.

Intenté:
– Agregarlo al final con un + (error diciendo que + no es aceptado).
– Agregar {{course.id}} en lugar del número estático al final de la URL (error diciendo que la interpolación dentro de los atributos ha sido eliminada y se debe usar v-bind o :id).
– Usar v-bind: en img-src (error diciendo que v-bind requiere un atributo).
– Agregar {{v-bind:course.id}} al final (el mismo error que solo {{course.id}}).

¿Es posible con la propiedad img-src, o debo hacerlo de una manera diferente?

davy.ai

July 22, 2023 at 3:24 pm

Para agregar URLs de imágenes dinámicas utilizando un ID de una API en un bucle, puedes usar la notación de llaves dobles para la interpolación de cadenas y reemplazar la URL de la imagen estática por una dinámica que incluya el ID del curso. Aquí tienes un ejemplo:

<img :src="'https://example.com/images/' + course.id + '.jpg'" alt="Imagen de tarjeta">

En este ejemplo, el atributo :src está vinculado a una expresión de JavaScript que concatena la URL de la imagen estática con el ID del curso utilizando el operador +. La URL resultante será única para cada tarjeta en el bucle, basada en el ID del curso.

Alternativamente, puedes usar una propiedad computada o un método para generar la URL de la imagen dinámica basada en el ID del curso y luego vincularla al atributo :src. Este enfoque puede proporcionar más flexibilidad en cómo generas las URLs de las imágenes y puede simplificar tu código de plantilla. Aquí tienes un ejemplo usando una propiedad computada:

computed: {
  getImageUrl() {
    return 'https://example.com/images/' + this.course.id + '.jpg';
  }
}

Y en tu plantilla:

<img :src="getImageUrl" alt="Imagen de tarjeta">

En este ejemplo, la propiedad computada getImageUrl genera la URL de la imagen dinámica basada en la propiedad course.id y la devuelve para que se vincule al atributo :src.

Answer

davy.ai

July 22, 2023 at 3:24 pm
Para agregar URLs de imágenes dinámicas utilizando un ID de una API en un bucle, puedes usar la notación de llaves dobles para la interpolación de cadenas y reemplazar la URL de la imagen estática por una dinámica que incluya el ID del curso. Aquí tienes un ejemplo:
```
<img :src="'https://example.com/images/' + course.id + '.jpg'" alt="Imagen de tarjeta">
```
En este ejemplo, el atributo :src está vinculado a una expresión de JavaScript que concatena la URL de la imagen estática con el ID del curso utilizando el operador +. La URL resultante será única para cada tarjeta en el bucle, basada en el ID del curso.

Alternativamente, puedes usar una propiedad computada o un método para generar la URL de la imagen dinámica basada en el ID del curso y luego vincularla al atributo :src. Este enfoque puede proporcionar más flexibilidad en cómo generas las URLs de las imágenes y puede simplificar tu código de plantilla. Aquí tienes un ejemplo usando una propiedad computada:
```
computed: {
  getImageUrl() {
    return 'https://example.com/images/' + this.course.id + '.jpg';
  }
}
```
Y en tu plantilla:
```
<img :src="getImageUrl" alt="Imagen de tarjeta">
```
En este ejemplo, la propiedad computada getImageUrl genera la URL de la imagen dinámica basada en la propiedad course.id y la devuelve para que se vincule al atributo :src.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo agregar una variable a un enlace de imagen en una tarjeta (vue-bootsrap)?

Answer

davy.ai