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属性需要设置为绑定属性。

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

使用带有vue和axios的img

1 个答案: