Vue.js 在 laravel 5.8 中获取公用文件夹图片

Question

我正在创建评论系统，现在我想在评论区显示用户个人资料图片。

我想从 laravel 5.8 公共文件夹中捕获并显示多个图像。这是我尝试过的。

如果用户有个人资料图片，我想显示它。如果没有，我想展示 一个使用 vue 头像组件的头像。我的图像存储在 公开/上传/个人资料。

现在我的控制台中没有任何错误。我还可以显示用户名和用户 cmets。

图片名称存储在mysql中。

comment.vue(第一条评论)

<div class="user" v-if="comment.user.image && comment.user.image.length > 0">
                    <span :v-for="(item, index) in comment.user.image">
                        <img :src="'uploads/' + 'profile' + '/' + item.image">
                    </span>
                </div>
                <div else class="user" >
                    <avatar :username="comment.user.name" :size="45"></avatar>
                </div>

commentController.php

public function index(Post $post)
{
    return $post->comments()->paginate(10);
}

public function show(Comment $comment)
{
    return $comment->replies()->paginate(10);
}

public function store(Request $request, Post $post)
{
return auth()->user()->comments()->create([
    'body' => $request->body,
    'post_id' => $post->id,
    'comment_id' => $request->comment_id
])->fresh();
}

个人资料表

Schema::create('profiles', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('user_id');
        $table->string('image');
        $table->string('gender');
        $table->string('country');
        $table->string('bod');
        $table->string('instagram');
        $table->string('description');
        $table->timestamps();
    });

在我的 VS 代码中，上传文件夹开始变红。

Answer 1

我的解决方案是创建一个 api 路由来显示图像。例如。

api.php

Route::get('profile/{fileName}', 'ProfileController@showImage');

ProfileController.php

class ProfileController {
    ...
    public function showImage($fileName)
    {
        $path = public_path("/images/{$fileName}");

        if (!\File::exists($path)) {
            return response()->json(['message' => 'Image not found.'], 404);
        }

        $file = \File::get($path);
        $type = \File::mimeType($path);

        $response = \Response::make($file, 200);
        $response->header("Content-Type", $type);

        return $response;
    }

}

而您的图像 src 将是 /api/profile/{imageName}。这是我的解决方案。