axios GET，更新Image Url vue JS答案

【问题标题】：Axios GET, update Image Url vue JSaxios GET，更新Image Url vue JS
【发布时间】：2021-03-19 08:45:49
【问题描述】：

调用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)
  })
}

【问题讨论】：

您能否添加组件的
是的，我已经在代码的第一行添加了它
能否请您也包括data？
添加了@majurageerthan先生

标签： javascript vue.js axios

【解决方案1】：

第 1 步：template 会像

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

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

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 不是从 axios 获取响应，而是从 dummyResponse 获取并绑定到图像对象。

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();
},

DEMO

【讨论】：

我不明白这个先生
@someone_that_needHelp 在 axios api 调用中，您将获得 json 响应数组。我只是用dummyResponse 对象创建了这个示例，而不是axios 调用。你想显示你从 api 响应中得到的所有 instagram 图片吗？
@someone_that_needHelp 你想显示你从axios响应得到响应的所有图像吗？
是的，我想显示我从 api 获得的所有图像，我已经在控制台上打印了数组成员并且我得到了一个 url
@someone_that_needHelp in change axios 方法如下 axios.get("configFile.basic_url/instagram_content/get_all") .then((response) => { if (response) { this.arrayInstagramRequest = response.data.result } }) .catch((error) => { console.log(error); }); 和 html 模板将类似于 <div v-for="(res,$index) in arrayInstagramRequest" :key="$index"> <img alt="Instagram Image" :src="res.Image" width="25%" /> </div>

【解决方案2】：

我想，你在 src 中错过了:

把src改成:src

像下面的代码，改变这个

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

进入这个

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

【讨论】：

不需要先生兄弟，很遗憾最初的解决方案没有奏效，我给出了另一个解决方案。兄弟你可以试试吗？

【解决方案3】：

问题是它自己的链接，我需要在之前添加“：”。我的 src 伙计们，谢谢你们帮助我

【讨论】：