Estoy tratando de configurar una página simple en mi proyecto Nuxt donde se recupera una URL de imagen de mi backend y debería mostrarse en la interfaz de Vue. El problema con mi código es que no se muestra la imagen.

Esto es lo que probé:

 <template> <div> <img :src="qr_code" alt="" /> </div> </template> <style> </style> <script> import axios from 'axios' axios.defaults.withCredentials = true; export default { ssr: false, data(){ return { qr_code: '', } }, created(){ this.request_code() }, methods: { request_code(){ return axios({ method: 'get', url: 'MY-BACKEND', withCredentials: true, }).then((response) => { this.qr_code = response['data']['qr_code'] }) } } } </script>

Aquí hay un ejemplo de la imagen que intento mostrar: https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/test:test?secret=test= prueba

El problema con mi código es que la imagen no se carga en absoluto, pero no entiendo por qué. Si trato de configurar qr_code: 'https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/test:test?secret=test=test' funcionará. ¿Cuál es la razón de esto?