Search code examples
laravelvue.jsintervention

Intervention Image broken in Vue

I'm trying to create an image on the fly without saving and sending to the Vue but I can't get to display.

in Laravel

$img = Image::make('image-path')->resize(400, 400);
        $img->text('name', 205, 138, function($font) {
            $font->file('fonts/BostonHeavy.woff');
            $font->size(42);
            $font->color('#ffffff');
            $font->align('center');
            $font->valign('top');
        });
            return $img->response('jpg');

in Vue

data () {
    return {
      image: null
    }
  },

  methods: {

  async fetchData (param) {

      this.image = await this.$axios.$get(`image`)
  }
}

in template

{{image}}
or
<img :src="image" />

always displays broken, though testing on Postman it works

Solution

  • Currently, you are putting a bunch of binary data into your img's src attribute, which does not work.

    You need to convert the image to a data URL as described here How can I convert image binary from API call to data URI in Javascript?

    If your endpoint does not need authentication (or any other special headers or payloads) you could also directly put the link to the image-generating endpoint directly into your img's src attribute. E.g. if your image is generated at /api/image then just simply put <img src="/api/image" />.