Axios GET, update Image Url vue JS

Question

After calling Axios get method, my webpage receives a response of some image URL, but I cannot update/refresh/re-render the image alone without re-render the entire page. Can anyone help me with this problem? Examples would be greatly appreciated.

this is my code

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

Answer 1

Step 1: template will be like

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

Step 2: Instead of axios response i mocked the response in dummyResponse data object and the data will be below,

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",
    },
  ],
};
},

Step 3: httpGetIstagramImage instead of getting the response from axios i am fetching from dummyResponse and binding to the image object.

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

Step 4: OnCreate method i am calling the function httpGetIstagramImage

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

DEMO

Answer 2

I think, You missed : in src

change src into :src

like below code, change this

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

into this

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

Answer 3

the problem is the link it self and i need to ad ":" before. my src guys, thankyou for helping me