Vue - using variables passed back from the model in image attributes

Hi there,

I have recently completed Treasure's course in an Introduction to Vue JS, and to try and bed in the basics I am completing a sample Vue project of building a QR Code Generator. This generates a QR code based on form inputs that the user enters, and displays the URL and image of the code on the page. I am trying to use variables (from the user input) that have been passed to the model, in my view (html) file, in the src attribute of the image, but I get a javascript error when I try to do this. Is there a sensible way of concatenating these attributes?

Here is my code:

Model: (App.js)

 const app = new Vue({
  el: '#input-form',
  data: {
    url: "",
    pixel_size: "",
    transparent: "",
    image_type: "",
    show_url: false,
    errors: false
  },
  methods: {
    generate_url: function(){
        if (!this.url && !this.pixel_size && !this.transparent && !this.image_type){
          this.errors = true;
      } else {
        this.show_url = true;
      }
    },
    on_change: function(value){
        console.log(value);
    }
  }
});

View (index.html)

<div class="row">
    <img src="https://qrtag.net/api/qr_{{ transparent }}_{{ pixel_size }}.{{ image_type }}?url={{ url }}">
</div>

Thanks,

Rob

London, UK