I'm trying to setup a page where my vue frontend receives a qr code url from my backend. The problem is that for some reason the image is not showing. I created a simple example where request_code simulates my backend. Here is the codesandbox example.
Whenever i try to load the image in my Vue app, i get a 400 error, but if i copy the image url and open it on my browser, it will show. How can i fix this?
Code:
<template>
<div>
<h1>{{ qr_code }}</h1>
<img :src="qr_code" />
</div>
</template>
<script>
export default {
data() {
return {
qr_code: "",
};
},
mounted() {
this.request_code();
},
methods: {
request_code() {
this.qr_code =
"https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/xyTrade:root?secret=7UORYWFJCLXY4OLEWMZWQMJ2QYGK5OFI&issuer=xyTrade";
},
},
};
</script>
What i find is that you haven't applied async/await against the request_code by applying async/await it works great.
<template>
<div>
<h1>{{ qr_code }}</h1>
<img :src="qr_code" />
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
qr_code: "",
};
},
async mounted() {
await this.request_code();
},
methods: {
request_code() {
this.qr_code =
"https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/xyTrade:root?secret=7UORYWFJCLXY4OLEWMZWQMJ2QYGK5OFI&issuer=xyTrade";
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>