Javascript Vue.js:在laravel公用文件夹中显示配置文件图像

我正在创建评论系统。 我在我的laravel项目中集成了vue.js

在我的评论区，我想在我的laravel中显示用户配置文件图像 公用文件夹

但我不知道如何显示图像

我想要达到的是

若用户有一个配置文件图像，我想在评论区显示它。但如果 用户没有个人资料图像，我想显示一个头像

我使用了vue avatar组件，所以我想我要使用它

我的个人资料图像存储在public/uploads/profile中

comment.vue

user.php

comment.php

web.php

---

如果图像文件的数据库列名为img，则 您可以按如下方式进行操作：

<div class="user" v-if="comment.user.img">
    <img :src="'uploads/profile/'+comment.user.img">
</div>
<div class="user" else>
    <img :src="default_image_path_here">
</div>

如果要为一个用户使用多个图像，则需要添加循环，如下所示：

<div class="user" v-if="comment.user.img.length > 0">
    <span v-for="(item, index) in comment.user.img">
         <img :src="'uploads/profile/'+item.your_image_name_column">
    </span>
</div>
<div class="user" else>
    <img :src="default_image_path_here">
</div>

---

如何调用映像路径？您是将图像名称保存在数据库中还是保存在路径中？@GayanS.Muthukumarana对不起，什么意思？谢谢你的帮助。我已经编辑了我的comment@GayanS.Muthukumarana谢谢，我已经在mysql服务器中保存了文件名。我希望在调用comment.user.img.Sorry时输出您的img名称结果，但它不起作用。。。我试过了，我有很多用户图片，所以不仅仅是一张图片，我想检索多张用户图片。然后你需要在其中添加一个循环。谢谢，你能给我看一下循环代码吗？非常感谢你。

public function profile(){
        return $this->hasOne(Profile::class);
    }

 public function comments()
    {
        return $this->hasMany(Comment::class);
    }

protected $with = ['user'];

protected $appends = ['repliesCount'];

Route::get('results/{post}/comments', 'CommentController@index');

<div class="user" v-if="comment.user.img">
    <img :src="'uploads/profile/'+comment.user.img">
</div>
<div class="user" else>
    <img :src="default_image_path_here">
</div>

<div class="user" v-if="comment.user.img.length > 0">
    <span v-for="(item, index) in comment.user.img">
         <img :src="'uploads/profile/'+item.your_image_name_column">
    </span>
</div>
<div class="user" else>
    <img :src="default_image_path_here">
</div>