API
Laravel5.7
LaravelPassportを使ってAPI認証
クライアント
Vue.js
axiosでHTTPリクエスト
困っていること
- API側でどのように画像をレスポンスするのか
- クライアント側で受け取った画像をどのように表示したらいいのか
2点についてどのようにしたら良いのかわからず困っています。アドバイスよろしくお願いします。
コード
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表示機能があるアプリを想定しています。
回答1件
あなたの回答
tips
プレビュー