javascript - axios GET，更新Image Url vue JS

Question

调用 Axios get 方法后，我的网页收到了一些图像 URL 的响应，但我无法单独更新/刷新/重新渲染图像而不重新渲染整个页面。谁能帮我解决这个问题？示例将不胜感激。

这是我的代码

<template>
img class="ig-img" src="arrayInstagramRequest[0]" alt="image">
</template>

  data: function () {
return {
  arrayInstagramRequest: [],
  convertedArrayInstagram: [],
  id: 0
}
  },

httpGetIstagramImage: function () {
  axios.get(configFile.basic_url + '/instagram_content/get_all').then((response) => {
    while (response.data.result[this.id] != null) {
      this.arrayInstagramRequest.push(response.data.result[this.id].instagram_url)
      this.id += 1
    }
    console.log(this.id)
    console.log(this.arrayInstagramRequest[0])
  }).catch((error) => {
    console.log(error)
  })
}

标签： javascriptvue.jsaxios

Answer 1

第1步：template会像

<template>
  <div id="app">
    <img alt="Instagram Image" :src="arrayInstagramRequest[0]" width="25%" />
  </div>
</template>

第2步：axios我模拟了数据对象中的响应，而不是响应dummyResponse，数据将在下面，

data() {
return {
  arrayInstagramRequest: [],
  convertedArrayInstagram: [],
  id: 0,
  dummyResponse: [
    {
      id: 0,
      Name: "Spec_0",
      Image: "https://www.encodedna.com/images/theme/jQuery.png",
    },

    {
      id: 1,
      Name: "Spec_1",
      Image: "https://www.encodedna.com/images/theme/json.png",
    },

    {
      id: 2,
      Name: "Spec_2",
      Image: "https://www.encodedna.com/images/theme/angularjs.png",
    },
  ],
};
},

第 3 步：我不是从我httpGetIstagramImage那里获取响应，而是从图像对象中获取并绑定到图像对象。axiosdummyResponse

methods: {
httpGetIstagramImage: function () {
  // axios
  //   .get("configFile.basic_url/instagram_content/get_all")
  //   .then((response) => {
  //     while (response.data.result[this.id] != null) {
  //       this.arrayInstagramRequest.push(
  //         response.data.result[this.id].instagram_url
  //       );
  //       this.id += 1;
  //     }
  //     console.log(this.id);
  //     console.log(this.arrayInstagramRequest[0]);
  //   })
  //   .catch((error) => {
  //     console.log(error);
  //   });
  if (this.dummyResponse) {
    this.dummyResponse.filter(function (e) {
      if (e.id === this.id) {
        this.arrayInstagramRequest.push(e.Image);
      }
      return e.id === this.id;
    }, this);
  }
},
},

第 4 步：我正在调用该函数的 OnCreate 方法httpGetIstagramImage

created() {
  this.httpGetIstagramImage();
},

演示