apiから画像データを受けとりクライアントで表示する方法

API

Laravel5.7
LaravelPassportを使ってAPI認証

クライアント

Vue.js
axiosでHTTPリクエスト

困っていること

API側でどのように画像をレスポンスするのか
クライアント側で受け取った画像をどのように表示したらいいのか

２点についてどのようにしたら良いのかわからず困っています。アドバイスよろしくお願いします。

コード

PHP
1// API
2// routes/api.php
3
4Route::middleware('auth:api')->get('/test', function () {
5    $image = (file_get_contents('../../images/test.png'));
6    return $image;
7});

JavaScript
1
2  export default{
3    created: function() {
4      const image = this.getImage()
5      console.log(image)
6    },
7    methods: {
8      getImage() {
9        this.$axios({
10          responseType: 'arraybuffer',
11          headers: {
12              'Content-Type': 'image/png',
13              'Authorization': 'Bearer '+ token
14          },
15          method: "get",
16          url: "url/api/test",
17          data: {
18          }
19        })
20        .then(response => {
21          console.log("Success")
22          console.log(response.data)
23        })
24        .catch(error => {
25          console.log("failure")
26          console.log(error.response.config)
27          console.log(error.response.data)
28        })
29        .then(() => {
30          console.log('Complete')
31        })
32      }
33    }
34  }
35
36

追記

APIはどれですか？

(2)画像のパスを連携する(一般的なブラウザでアクセスできない領域)です。
なので、クライアント側で画像を表示するためには(1)画像データそのものを連携する必要があるのではないか？と考えたのですが、一般的にはどのように実装されているか想像もつかず質問させていただきました。

クライアントはどれですか？

(B)HTML表示機能があるアプリを想定しています。

tabuu

2019/04/03 05:16

APIはどれですか？ (1)画像データそのものを連携する (2)画像のパスを連携する(一般的なブラウザでアクセスできない領域) (3)画像のURLを連携する(一般的なブラウザでアクセス可能なURL) (4)その他クライアントはどれですか？ (A)ウェブブラウザ (B)HTML表示機能があるアプリ (C)HTML表示機能がないアプリ (D)その他

bws

2019/04/03 05:25

ありがとうございます。 APIはどれですか？ (2)画像のパスを連携する(一般的なブラウザでアクセスできない領域)です。なので、クライアント側で画像を表示するためには(1)画像データそのものを連携する必要があるのではないか？と考えたのですが、一般的にはどのように実装されているか想像もつかず質問させていただきました。クライアントはどれですか？ (B)HTML表示機能があるアプリを想定しています。