Vue - can't show image src

user_13873088 0
Viewed 284

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>
vue.js javascript
1 Answers

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>

user_56671170
Related