如何使用 vuejs 从 SPA 从 /storage -laravel- 访问图像

Question

如果我将图像放入 "storage/app/public/img/logo.png" 并执行：

$ php artisan storage:link

如何在 vue 组件中获取 logo.png？

<img src="storage/app/public/img/logo.png">

请求没问题 (200) 但该图像未呈现，因为它是 SPA。

谢谢，

Answer 1

当使用 php artisan storage:link 时，您正在创建从 public/storage 到 storage/app/public

的符号 link

我习惯使用 asset 而不是常规路径：尝试使用 src="{{ asset('storage/app/public/img/logo.png') }}

假设您使用的是 SPA，当组件呈现时，它会发出新的请求以获取 img

Answer 2

当您使用 storage:link 命令时，您会在 storage/app/public 文件夹和 public/storage 文件夹之间创建一个符号 link。

现在您可以在 url $BASE_URL/storage/img/logo.png 中找到您的文件。

我建议您在 blade 模板中使用 asset 辅助函数：

<img src="{{ asset('storage/img/logo.png' }}">

注意：请务必在文件夹上设置正确的文件权限，否则在尝试访问它时会出现 Unauthorized 错误。

Answer 3

嗯，之后要做的：

$ php artisan storage:link

在我的组件中我使用了：

<img :src="'../storage/img/logo.png'">

谢谢，

Answer 4

希望我的回答对大家有所帮助，使用此命令创建符号 link

php artisan storage:link

现在在你的 vue 模板中使用它如下

/storage/path/to/file

Answer 5

Check config/filesystems.php (ie: unmodified default):

    // If server doesn't support "making symbolic links":
    // https://medium.com/@shafiya.ariff23/how-to-store-uploaded-images-in-public-folder-in-laravel-5-8-and-display-them-on-shared-hosting-e31c7f37a737
    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],

Save an image:

   $image = $request->file('image'); // something like that
   $slug = 'some-slug-99';

   $image->storeAs(
       'examples' .'/'. $slug,
       $image->getClientOriginalName(),
       'public'
   );

Create the symlink from /storage/app/public to public/storage (ie: your public html folder which makes asset() work in Laravel Blade templates, I think but don't quote me on that)

$ php artisan storage:link

Place the HTML in your Vue component:

<img
    v-for="image in example.images"
    :key="image.filename"
    :src="`/storage/examples/${example.slug}/${image.filename}`"
>

此外，请阅读文档：https://laravel.com/docs/8.x/filesystem

Answer 6

routes/web.php

对于 SPA 应用程序，Laravel 通常为所有传入请求呈现索引 blade。

Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

我更改了此路由，以便除“/storage/**/.”之外的所有路由都找到索引 blade 页面。这样，您既可以渲染 SPA 又可以获取上传的图像。

Route::any('{all}', function () {
    return view('index');
})->where('all', '^(?!storage).*$');

我假设您已经使用 php artisan storage:link 命令创建了符号链接。
看看Vue js laravel 8 routing

如何使用 vuejs 从 SPA 从 /storage -laravel- 访问图像

How to access image from /storage -laravel- from SPA with vuejs

laravel

single-page-application

vue.js