2

Hola estoy utilizando vue con axios para hacer request de informacion de una API y funciona con las datos como nombre, fecha pero cuando deseo utilizar lo con un img src="" no funciona :

html:

      <div class="container" id="app">
        <h3 class="text-center">VueNews</h3>
        <div class="columns medium-3" v-for="result in results">
          <div class="card">
            <div class="card-divider">
              {{ result.titulo_periodico }}
            </div>
            <div class="card-section">
              <img src="{{ result.photos[0].urls[2].original }}" alt="">
              <p>{{ result.photos[0].urls[2].original }}</p>
            </div>
          </div>
        </div>

app.js :

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("xxxxxxxxxx")
      .then(response => {
        this.results = response.data
      })
  }
});

introducir la descripción de la imagen aquí alguna idea de como desplegar la img utilizando vue.

2 respuestas 2

1

Hola ya vi donde de encuentra el error se debe modificar la solicitud del src con un v-bind hacer la solicitud de imagene con vue:

<img v-bind:src="result.photos[0].urls[2].original" alt="">

introducir la descripción de la imagen aquí

1

Siempre que cargues elementos dinámicamente debes usar el v-bind o usando simplemente : en cada elemento (src, alt) lo puedes usar en cualquier propiedad

<img :src="result.photos[0].urls[2].original" alt="">

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.