Estoy tratando de configurar una página donde mi frontend vue recibe una URL de código qr de mi backend. El problema es que por alguna razón no se muestra la imagen. Creé un ejemplo simple donde request_code simula mi backend. Aquí está el ejemplo de codesandbox .
Cada vez que intento cargar la imagen en mi aplicación Vue, aparece un error 400, pero si copio la URL de la imagen y la abro en mi navegador, aparecerá. ¿Cómo puedo arreglar esto?
Código:
<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>Lo que encuentro es que no ha aplicado async/await contra request_code aplicando async/await, funciona muy bien.
<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>