Блог

Главная - Вопросы по программированию - Отображение изображения в Vue из папки хранения с помощью laravel

Отображение изображения в Vue из папки хранения с помощью laravel

#laravel #vue.js #laravel-5 #vuejs2

#laravel #vue.js #laravel-5 #vuejs2

Вопрос:

Я сохраняю свои изображения в следующем месте

Хранилище / приложение / общедоступные / Пользовательские изображения

Оно сохраняется, но когда я извлекаю его в своем компоненте vue, оно выдает ошибку 404 not found.

 <img :src="`/storage/${post.img_path}`"/>

и созданный URL-адрес

 http://localhost:8000/storage/userImages/872937058.png

Пожалуйста, дайте какие-либо предложения.

Ответ №1:

  1. Добавьте метод в свой контроллер (например PostController ):

     use IlluminateSupportFacadesStorage;

/**
 * Display the specified resource.
 *
 * @param AppPost $post
 * @return SymfonyComponentHttpFoundationBinaryFileResponse
 * @throws IlluminateAuthAccessAuthorizationException
 */
public function image(Post $post)
{
    return response()->file(
        Storage::disk('local')->path($post->img_path)
    );
}

  2. Добавьте маршрут к routes/web.php :

     Route::get('/posts/{post}/image', 'PostController@file')->name('posts.image');

  3. Используйте его следующим образом:

     <img :src="`/posts/${post.id}/image`"/>

Комментарии:

1. Не могли бы вы сказать, что передать в последнем параметре, я сохраняю такой путь в db img_upload/629806533.png, где img_upload — это папка, а 629806533 — изображение

2. @user3653474 какой параметр вы имеете в виду? вы должны передать этот путь, как Storage::disk('local')->path('img_upload/629806533.png') в пункте 1.

3. <img:src=» /posts/${post.id}/image «/> что передать в этом параметре изображения

4. изображение не является параметром, это просто часть URL-адреса, который я определил в маршруте: Route::get('/posts/{post}/image', 'PostController@file')->name('posts.image');

Ответ №2:

Первым шагом вы должны установить

 php artisan storage:link

В вашем файле vue вы можете использовать обычный тег img

 <img :src="`/storage/${post.img_path}`" />

или,

 <img :src="`/storage/userImages/${imageName}`" />

Примечание: вам не нужно добавлять «app / public» в атрибут src