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

Posted 2023-02-16

【中文标题】使用 laravel 在 Vue 中显示存储文件夹中的图像

【英文标题】：Display image in Vue from storage folder with laravel

【发布时间】：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

请给点建议。

【参考方案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”