How to fix image showing as symbols in laravel 5

I'm using this package simple-qrcode to generate a qr code . so Im generating it when a user clicks a button in a vue component.

When i generate the qrcode which works fine but all i get is weird symbols that is not a qrcode.

A Screen Shot

I'm returning the QrCode as a response :

return response($Qrcode)->header('Content-type','image/png');

if i access the url in the browser i can see the qrcode image just fine :\ .

how im showing the code in vue component :

showQrcode() {

    axios.get(`/api/qrcode/${this.postTitle}/${this.id}`)
        .then(res => {
            this.qrCode = res.data;

        })
}

the result :

screen shot 2

the data is just a bunch of werid symbols .

Any idea how i can solve this?

I tried to return json($qrcode) but it's returning an empty page.

via Chebli Mohamed