I can not display imagene with vue using axios

1

Hello, I am using vue with axios to request information from an API and it works with the data as name, date but when I want to use it with a img src="" it does not work:

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
      })
  }
});

some idea how to display the img using vue.

    
asked by JULIO MACHAN 26.05.2017 в 19:38
source

1 answer

0

Hi, I've already seen where the error is found, you should modify the request for src with a v-bind make the image request with vue:

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

    
answered by 26.05.2017 в 19:42