Javascript Axios获取、更新图像Url vue JS

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

img class=“ig img”src=“arrayInstagramRequest[0]”alt=“image”>
数据：函数（）{
返回{
arrayInstagramRequest:[]，
转换的ArrayinStagram:[]，
身份证号码：0
}
},
HttpGetistaGramiImage:函数（）{
获取（configFile.basic_url+'/instagram_content/get_all'）。然后（（响应）=>{
while（response.data.result[this.id]！=null）{
this.arrayInstagramRequest.push（response.data.result[this.id].instagram\u url）
此值为0.id+=1
}
console.log（this.id）
console.log（此.arrayInstagramRequest[0]）
}).catch（（错误）=>{
console.log（错误）
})
}

我想，你错过了src中的

：

将

src

更改为

：src

像下面的代码一样，改变这个

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

进入这个

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

---

第1步：

模板

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

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

问题在于链接本身，我需要在之前添加广告“：”。我的src成员，谢谢你帮助我
你能添加你的组件的一部分吗？什么时候调用你的“httpGetIstagramImage”吗？是的，我已经在代码的第一行添加了它。你能不能也包括
数据
？添加了@MajurageeThantied先生，它不起作用，谢谢先生不需要兄弟先生，很遗憾最初的解决方案不起作用，我给出了另一个解决方案。你能试试吗，兄弟？我不太明白sir@someone_that_needHelp在axios api调用中，您将获得json响应数组。我没有使用
axios
调用，而是使用
dummyResponse
对象创建了这个示例。你想显示你从api response获得的所有instagram图片吗？@需要帮助的人你想显示你从
axios
response获得的所有图片吗？是的，我想显示我从api获得的所有图片，我已经在控制台上打印了数组成员，并且得到了一个url@someone_that_needHelp在下面的
axios
方法中
axios.get（“configFile.basic\u url/instagram\u content/get\u all”）。然后（（response）=>{if（response）{if（response）{this.arrayInstagramRequest=response.data.result}）。catch（（error）=>{console.log（error）；}）和html模板类似于

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