【问题标题】: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】:
    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)
          );
      }
      
    2. 添加到routes/web.php的路由:

      Route::get('/posts/{post}/image', 'PostController@file')->name('posts.image');
      
    3. 像这样使用它:

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

    【讨论】:

    • 你能告诉最后一个参数要传递什么吗,我在 db img_upload/629806533.png 中存储这样的路径,其中 img_upload 是文件夹,629806533 是图像
    • @user3653474 你指的是哪个参数?您应该将此路径作为 Storage::disk('local')-&gt;path('img_upload/629806533.png') 在项目 1 上传递。
    • /posts/${post.id}/image"/> 这个图片参数要传入什么
    • 图像不是参数,它只是我在路由中定义的 URL 的一部分:Route::get('/posts/{post}/image', 'PostController@file')-&gt;name('posts.image');
    【解决方案2】:

    第一步,你应该安装

    php artisan storage:link
    

    在你的 vue 文件中,你可以使用常规的 img 标签

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

    或者,

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

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

    【讨论】:

      猜你喜欢
      • 2020-10-11
      • 2017-09-03
      • 2020-12-19
      • 1970-01-01
      • 2018-10-27
      • 2019-03-11
      • 1970-01-01
      • 2020-08-07
      • 1970-01-01
      相关资源
      最近更新 更多