Laravel에서 생성 한 URL을 Vue.js에 바인딩하는 방법은 무엇입니까? 구성 요소에

Question

이 있으면 Axios를 사용하여 현재 사용자의 데이터를 가져옵니다. avatars/1/mNpxJNRrRPbbWSx0kuIL40JQJIF5SM5dscTq3zpv.jpeg

아바타의 URL은 Storage :: disk ("s3")에 삽입해야합니다. 그렇다면 변수를 내 구성 요소에 아바타로 두는 방법은 무엇입니까?

나는 다음과 같은 시도 : <img :src="'Storage::disk("s3")->url(' + this.user.avatar + ')'">하지만 난 당신이 날보기 또는 구성 요소의 스토리지를 사용하는 경우 잘 모르겠어요 오류 ...

Answer 1

를 얻을. 명확성을 위해 Vue 구성 요소에 Storage 파사드를 사용할 수 없습니다. 그것은 오직 Laravel을위한 것입니다.

두 가지 옵션이 있습니다. 즉, 구성 요소가 받침대를 받도록 허용하거나 Storage 외관을 사용하여 URL을 반환하는 라우트 경로를 만들 수 있습니다.

옵션 1 - 블레이드보기에서

을 통과 소유,

<my-component :src="'{{ Storage::disk("s3")->url(' + this.user.avatar + ')' }}"> 

옵션 2 - Laravel 경로

는에서

Route::get('api/my-avatar', UserController@getAvatar') 

같은 것을 간단한 경로를 생성하여 UserController

public function getAvatar() 
{ 
    return Storage::disk("s3")->url(auth()->user()->avatar); 
} 

및 axios에서 해당 경로를 호출하십시오.