使用 laravel 在 Vue 中显示存储文件夹中的图像答案

【问题标题】：Display image in Vue from storage folder with laravel使用 laravel 在 Vue 中显示存储文件夹中的图像
【发布时间】：2021-02-07 08:17:39
【问题描述】：

我将图片保存在以下位置

存储/app/public/userImages

它正在被保存，但是当我在我的 vue 组件中检索它时，它会抛出错误 404 not found。

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

创建的网址是

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

请给点建议。

【问题讨论】：

标签： laravel vue.js laravel-5 vuejs2

【解决方案1】：

向你的控制器添加一个方法（例如PostController）：

use Illuminate\Support\Facades\Storage;

/**
 * Display the specified resource.
 *
 * @param \App\Post $post
 * @return \Symfony\Component\HttpFoundation\BinaryFileResponse
 * @throws \Illuminate\Auth\Access\AuthorizationException
 */
public function image(Post $post)
{
    return response()->file(
        Storage::disk('local')->path($post->img_path)
    );
}

添加到routes/web.php的路由：

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

像这样使用它：

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

【讨论】：

你能告诉最后一个参数要传递什么吗，我在 db img_upload/629806533.png 中存储这样的路径，其中 img_upload 是文件夹，629806533 是图像
@user3653474 你指的是哪个参数？您应该将此路径作为 Storage::disk('local')->path('img_upload/629806533.png') 在项目 1 上传递。
/posts/${post.id}/image"/> 这个图片参数要传入什么
图像不是参数，它只是我在路由中定义的 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}`" />

注意：src 属性不需要添加“app/public”

【讨论】：