img with vueとaxiosを使用

Question

私はvueを使用していますが、imgを使用しようとしていますが、リクエストするたびにこのコードがどのように表示されるかはわかりません。

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> 

それはタイトルのように動作しても、URLが表示されますが、私はimg src=""でそれを使用しようとすると、それはないメイン情報何でもしてください

私は本当にありがとうございます。

Answer 1

src属性をバインド属性として設定する必要があります。

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