CODEWITHSUNDEEP
javascripthtmlaxios
JULIO MACHAN
JULIO MACHAN

Reputation: 161

Use an img with vue and axios

I'm using vue and I try to use img but every time I make the request it doesn't show anything this how I got the code.

app.js:

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

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>
</div>

The main information it work like the title and even display the url but when I try to use it with img src="" it doesn't do anything

I will really appreciate if you can help me it this issue.

Upvotes: 0

Views: 1794

Answers (1)

varbrad
varbrad

Reputation: 474

The src attribute needs to be set as a bound attribute.

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

Upvotes: 1

Related Questions