Как я могу отобразить изображение из хранилища Laravel для внешнего интерфейса?

Question

Я сохраняю изображение в хранилище Laravel, сохраняя путь к базе данных следующим образом:

if($request->hasFile('avatar')) 
      {
        $avatar = $request->file('avatar');
        $path = $avatar->store('images/profile');

         $thumbnailName = "avatar".Date('YMdhis');
        $avatar->move(public_path('images/profile'), $thumbnailName);

      }
      //Save path to the database
      $avatar_path = new UserProfile;
      $avatar_path->avatar = $path;
      $avatar_path->save();

  The challenge  I am having is displaying the image in VueJs front. Here is my vue template:



<img :src="profile.avatar" alt="Profile Photo Image" width="200" height="200" class="img-thumbnail"/>

//This obviously does not work because profile.avatar contains relative 
path of the image as saved in the database
  **JavaScript**
<script>
      export default
{
    name:'ListProfile',
    data(){
        return{

          profile:{} //storing image path as fetched from database

        }
    },
    }
      </script>

Я также сделал символическую ссылку из 'public / storage' в 'storage / app, используя хранилище команд artisan: ссылка

Это мой базовый URL в main.js:

 axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'

Любая помощь?Заранее спасибо.

Answer 1

просто используйте url () помощник в бэкэнде, чтобы сгенерировать полный URL-адрес изображения и передать его в качестве реквизита компоненту vue.

$profile->avatar = url($profile->avatar);

, а затем передайте $ profile (или просто непосредственно создайте ипередайте $ avatar, в зависимости от ваших потребностей) Vue в качестве реквизита.

Answer 2

Вы должны вернуть URL с помощью Storage фасад, попробуйте получить URL следующим образом: Storage::url($profile->avatar)

Вы просто возвращаете модель из контроллера?