干预图像在 Vue 中损坏

Question

我想在不保存和发送到 Vue 的情况下即时创建图像，但我无法显示。

在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');

在 Vue 中

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

  methods: {

  async fetchData (param) {

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

在模板中

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

总是显示损坏，虽然在 Postman 上测试它有效

Answer 1

目前，您正在将一堆二进制数据放入您的 img 的 src 属性中，这不起作用。

您需要将图像转换为 data URL as described here How can I convert image binary from API call to data URI in Javascript?

如果您的端点不需要身份验证（或任何其他特殊 headers 或有效负载），您也可以直接将 link 到 image-generating 端点直接放入您的 img 的 src 属性中.例如。如果您的图像是在 /api/image 生成的，那么只需输入 <img src="/api/image" />.

干预图像在 Vue 中损坏

Intervention Image broken in Vue

laravel

vue.js

intervention