javascript - 在 vue 和 axios 中使用 img

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>

它的主要信息就像标题一样，甚至显示网址，但是当我尝试将它与 img src="" 一起使用时，它不会执行任何操作

如果您能帮助我解决这个问题，我将非常感激。

Answer 1

需要将src属性设置为绑定(bind)属性。

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