How does axios request a picture from a picture server and display it on img? - Codes Helper - Programming Question Answer

How does axios request a picture from a picture server and display it on img?

1. Front-end vue+webpackage+axios, back-end springboot
2. Zuul is used as the gateway and routing is configured. Authentication is carried out at the gateway entrance by writing token, in header
2. Use fastDFS as a file server and configure nginx for online preview
the online preview address of 3.fastDFS is not open to the public and is routed through zuul. This requires a token, so writing the image address directly to the src attribute of img is not feasible.

related codes

    getimg(){
      axios.get(process.env.BASE_API+"preview/group0/M00/00/00/rBQAHVtkLACAR2y9AAgEf2GW0sY139.png", {
        responseType: "arraybuffer",
        headers:{"validtoken":this.$store.getters.token}
      }).then(response => {
        return "data:image/png;base64," +btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ""));
      }).then(data=>{
        that.$refs.img.src=data;
      });

you can see that the picture is requested, but how to display it on img? The above code is written with reference to the answer above https://codeshelper.com/q/10., but it is not shown. The last data of the console.log output is only the previous short paragraph" data:image/png;base64, "

.

Apr.05,2021

https://www.opinionatedgeek.c.
is here to verify whether the base64 is valid

the front and rear ends are separated, and then

 getimg(){
      axios.get(process.env.BASE_API+"preview/group0/M00/00/00/rBQAHVtkLACAR2y9AAgEf2GW0sY139.png", {
        responseType: 'arraybuffer',
        headers:{"validtoken":this.$store.getters.token}
      }).then(response => {
        return  window.URL.createObjectURL(new Blob(response));
      }).then(data=>{
        that.$refs.img.src=data;
      });

how is the problem solved?

axios.get(' URL', { responseType: 'blob', })
console.log(URL.createObjectURL(res.data))

this.$http.get('get_img_url',{ responseType: 'blob'}).then((res)=>{
    let reader = new FileReader()
    reader.onload = (e) => {
        this.imgSrc = e.target.result;
    }
    reader.readAsDataURL(res.data)
}).catch((err)=>{

});

Previous: Vue Runtime create components-how does the webpack+vue initial page load multiple components?

Next: The picture is preloaded, and there are multiple loads.

In vue, when the account input and password input of the login page communicate between two different components, how to use axios to verify whether it is necessary to create a new login interface at this time?
In vue, when the account input and password input of the login page communicate between two different components, how to verify the login through axios? do you need to create a new login interface at this time? ...

Component-communication axios vue.js

Feb.26,2021
In vue, you can use axios in mounted to get data,data to render on the page. The num, in the page can be clicked and added with 1, which cannot trigger update.
numnumvue axiosasyncawaitupdated...

Ajax axios vue.js

Feb.28,2021
When using axios to submit the form, it keeps reporting 415 errors, how to solve it, online, etc.
when submitting the form, I have been reporting 415 errors and tried many ways. My own is not good, nor is my copy colleague s, but my colleague s will not report an error, exactly the same way. I don t know why. html have you ever encountered th...

Html axios vue.js javascript

Feb.28,2021
Axios cross-domain problem
is very distressing, and everything that has been rewritten has been written. It has always been localhost . another project has also been restarted main.js created() { let url = this.HOST + " query"; this.$axios.get(url, { ...

Front-end axios vue.js

Feb.28,2021
Can computed be used in combination with axios? How should I use it? the data obtained by my return axios is always undefined.
detail: { get() { let detail const gameId = this.id querySingleGameDetail(gameId).then(response => { detail= response.data.data.detail }) return detail } }...

Axios vue.js

Feb.28,2021
Axios request API. If there are no parameters, trouble Vue partners to have a look.
A login request, the username parameter and password parameter have been set two parameters of username and password are not seen in the chrome browser to submit, what is the reason? ...

Axios vue.js

Mar.01,2021
In the vue project, how to make the value of the drop-down box default to the smallest value in the array obtained by the query background?
is written, thank you @ hfhan <el-select v-model="value"> <el-option v-for="item in gameStatusList" :key="item.value" :label="lang== zh ? item.nameCn : item.nameEn" :valu...

Vuex axios vue.js

Mar.02,2021
Frontend vue axios backend koa2, frontend sends requests without cookie
the subject has just learned node and back-end knowledge. There was a problem when combining the previous todolist written in vue with the back-end code (login section). Front end Code-vue methods methods: { checkHasLogin () { axios.get( ...

Node.js cookie koa2 axios vue.js

Mar.02,2021
The format of transmitting parameters in application/x-www-form-urlencoded for axios is incorrect.
use axios to pass parameters. The initial request header is passed in json format without adding format. The backend says that if formdata is needed, add to axios. axios.defaults.headers = { "Content-Type": "application x-www-form-urlenc...

Axios vue.js

Mar.03,2021
How do vue-cli-generated projects request configuration agents individually?
after the project file from build is deployed on the server, all requests point to the current domain name, and there is no problem with cross-domain. now the requirement is that some of the requests should be directed to other domain names and cross-d...

Axios vue.js

Mar.03,2021
Multiple concurrent requests in vue when one request detects the need for login, cancel the other requests and restart after the login is completed
this project is based on Wechat s silent login in Wechat, that is, there is no need for extra users to log in, just jump and reload the page to complete the login. Previously, the code that detected non-login with the interceptor was used to jump direc...

Axios vue.js javascript

Mar.03,2021
The path problem of Vue + axios + php on url
How to write the path of url? I keep reporting 404 . ...

Front-end axios vue.js

Mar.04,2021
Axios sends get requests twice, both of which are get requests, not options on the Internet.
network this is a request initiated by the front end. Is the target IP, of an agent localhost, now changed to post request, or will it be changed to get, once and post once ...

Number-of-requests axios vue.js

Mar.05,2021
Axios request question: can't you get what is written by the then method? Or how to write the data returned by response?
when I am developing, I will directly export let getSliders = ()=>{ return axios.get( sliders ); }; you can return the data to the component, but export let getSliders = ()=>{ axios.get( sliders ).then(response=>{ console.log(res...

Axios vue.js

Mar.05,2021
The vue child parent component passes a value. You want to render the child component after axios returns, but you must do so. How to solve this problem?
vue wants to pass values to child components through prop. The value bound by the parent component has a default value. It is hoped that after the data is returned by the axios background, extend more objects on its own data and then pass it to the chil...

Axios vue.js

Mar.05,2021
The problem of axios Cross-domain error reporting in vue
Content-TypeContent-Type ...

Javascript axios vue.js

Mar.05,2021
Is it right to try to implement the logic in the background rather than in the foreground?
try not to be serious, is the kind that the complexity of the foreground and background implementation is about the same, or the foreground implementation may be a little easier, are put in the background to implement I think it s better to ...

Axios vue.js spring-mvc java javascript

Mar.06,2021
The axios request returns a question mark in Chinese, but there is no problem with the jQuery request.
vue rookie asks a question: there is no problem with the Chinese data returned by the previous project with the data requested by jQuery, but now the data returned by using vue to reconstruct the data returned with axios appears : UTF-8 . ...

Axios vue.js

Mar.07,2021
Response data cannot be obtained after a successful Vue axios post request
use axios to send post request for background interface this.$ajax.post( user login ,{ username: user, password: pass }) .then(function (response) { console.log(response) console.log(response.data) }) ...

Axios vue.js springboot

Mar.09,2021
The components of vuetify use the
now I want to add a progress bar component in vuetify to the global interceptor of axios. How should I use it in this JS? ...

Axios vue.js

Mar.09,2021

Menu