Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Question

Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Can someone help me figure out how to solve this issue? I have an API that returns a base64 image, and I want to load this image on my site. Any suggestions on where or how I should implement my function?

This is the API call located in the methods:

methods:{
    async getGraph(){
      const body = new FormData();
      body.append('hostname','hostname');
        axios({
          method:'post',
          url:'http://127.0.0.1:8000/api/graph',
          data: body,
          headers:{"Content-Type":'multipart/form-data'}
        }).then(response=>{
                var graphBase64 = Object.values(response.data)[0]
                console.log(graphBase64)
                return graphBase64
        }).catch(function(response){
          console.log(response)
        })
    }
}

And I would like to use it in this way:

<img v-bind:src="getGraph()">

I was considering placing my API call in beforeMounted, but then the site won't load properly. Thank you in advance for any advice, articles, or ideas!

javascript vue.js vuetify.js

Answer 1

Answer №1

you are getting warm. you are heading in the right direction to make it dynamic, but there's a better way.

async functions return a Promise: check out more information in the MDN documentation.

Instead of directly updating the value, you can create another variable and assign the updated value to that:

<template>
  <img :src="base64" />
</template>

<script>
data() {
  return {
    base64: "",
  }
},

mounted() {
  this.updateBase64()
},

methods: {
  async updateBase64() {
    // perform asynchronous operations
    this.base64 = newValue
  }
}
</script>

For more insights on the mounted() hook, refer to the documentation at https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Answer 2

you are getting warm. you are heading in the right direction to make it dynamic, but there's a better way.

async functions return a Promise: check out more information in the MDN documentation.

Instead of directly updating the value, you can create another variable and assign the updated value to that:

<template>
  <img :src="base64" />
</template>

<script>
data() {
  return {
    base64: "",
  }
},

mounted() {
  this.updateBase64()
},

methods: {
  async updateBase64() {
    // perform asynchronous operations
    this.base64 = newValue
  }
}
</script>

For more insights on the mounted() hook, refer to the documentation at https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Answer №1

Similar questions

The "util" module has been extracted to ensure compatibility with browsers. Trying to use "util.promisify" in client code is not possible

Having trouble reaching an element within a successful Ajax call

Passing a list of objects containing lists in MVC3

Having trouble with my Express app due to errors popping up because of the order of my routes

Is your Angular 2 routing failing to work properly after a page refresh or reload when using gulp?

Trouble with text box focus functionality

In order to streamline our production environment, I must deactivate Vue.js devtools, while ensuring they remain active during development mode

Exploring Angular's Dependency Injection

What sets apart optionalDependencies from peerDependencies in the Meta optional?

How can the background color of a DIV be altered based on the values of an array's minimum

live PHP recording of data moving between tables

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

What is the best way to assign a unique ID to every <td> element within a table using React Js?

Incorporating a TypeScript module into a JavaScript module within a React application

I'm curious as to why IPC messages from one menu item in Electron can successfully reach my window, but when sent from a different menu item, they do not seem to

How to eliminate unnecessary space when the expansion panel is opened in material-ui

The curious case of jQuery.parseJSON() failing to decode a seemingly valid Json string on a Windows-based server

Progress bar displaying during Ajax request

The automated test locator in Angular using Protractor is failing to function

Error message in Angular js: Unable to load file using XMLHttpRequest