How to fix image showing as symbols in laravel 5

Question

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.

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 :

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.

Could you just set the url to the `src` attribute of an ``? Ajax is usually used for textual data, but not for binary data (in this case an image). You could also e.g. encode your image as base64 and transmit it like that, then it is easily transmittable via Ajax. — ssc-hrep3, Sep 23 '19 at 09:15
Hi and welcome to SO. You're returning your image as raw binary data. Please have a look at [this question](https://stackoverflow.com/questions/51411544/display-raw-image-content-type-in-vue-js) — IlGala, Sep 23 '19 at 09:16
@ssc-hrep3 thanks for the advice .. i did encode the image `response(base64_encode($code))` and in my vue component `````` its working like a charm — CODING_F, Sep 23 '19 at 09:25
Great! Keep in mind that base64 has a larger file size than raw binary data. So, your losing a bit of performance (transmitted data amount is larger) when using base64 over binary data. https://stackoverflow.com/a/11402374/3233827 — ssc-hrep3, Sep 23 '19 at 09:29

0 Answers0