在 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>

它的主要信息就像标题一样工作，甚至显示 url 但是当我尝试将它与 img src="" 一起使用时它什么也没做

如果你能帮我解决这个问题，我将不胜感激。

Answer 1

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

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

在 vue 和 axios 中使用 img

Use an img with vue and axios

html

javascript

axios