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

Could you add the <template> part of your component, and when is your 'httpGetIstagramImage' called? — Julien Ripet
– Julien Ripet, Commented Mar 19, 2021 at 8:50

Jebasuthan · Accepted Answer · 2021-03-19 11:09:22Z

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

answered Mar 19, 2021 at 11:09

Jebasuthan

5,6246 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

someone_that_needHelp Over a year ago

i dont understandany of this sir

Jebasuthan Over a year ago

@someone_that_needHelp In axios api call you will get array of json response. Instead of axios call i just created this example with dummyResponse object. Do you want to display all the instagram pictures which you got from api response?

Jebasuthan Over a year ago

@someone_that_needHelp do you wants to display all the images which you got the response from axios response?

someone_that_needHelp Over a year ago

yes i want to display all the image that i got from the api, i already print the array member on console and i got an url

Jebasuthan Over a year ago

@someone_that_needHelp in change axios method like below

axios.get("configFile.basic_url/instagram_content/get_all") .then((response) => {   if (response) {     this.arrayInstagramRequest = response.data.result   } }) .catch((error) => {   console.log(error); });

and html template will be like

<div v-for="(res,$index) in arrayInstagramRequest" :key="$index">   <img alt="Instagram Image" :src="res.Image" width="25%" /> </div>

|

majuran · Accepted Answer · 2021-03-20 01:54:26Z

0

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

edited Mar 20, 2021 at 1:54

answered Mar 19, 2021 at 10:55

majuran

2,3393 gold badges21 silver badges34 bronze badges

1 Comment

majuran Over a year ago

no need sir bro, It was sad the initial solution didn't work, I gave another solution. Could you try it bro?

someone_that_needHelp · Accepted Answer · 2021-03-19 13:59:34Z

0

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

answered Mar 19, 2021 at 13:59

someone_that_needHelp

1655 silver badges19 bronze badges

Collectives™ on Stack Overflow

Axios GET, update Image Url vue JS

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related