用Laravel在VueJs中显示动态图像

Route::get('/user/{id}/avatar', 'UserController@avatar');

public function avatar($id)
{
    // 根据用户ID获取用户头像路径
    $avatarPath = User::find($id)->avatar;

    // 返回图像数据
    return response()->file($avatarPath);
}

<template>
  <div>
    <img :src="avatarUrl" alt="User Avatar">
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: ''
    };
  },
  mounted() {
    // 发送请求获取用户头像的URL
    this.fetchAvatar();
  },
  methods: {
    fetchAvatar() {
      // 发送请求获取用户头像的URL
      // 可以使用axios或其他HTTP库发送请求
      // 在这里省略具体实现
      // 假设获取到的URL存储在response.data.avatarUrl中
      this.avatarUrl = response.data.avatarUrl;
    }
  }
};
</script>

<template>
  <div>
    <user-avatar></user-avatar>
  </div>
</template>

<script>
import UserAvatar from './UserAvatar.vue';

export default {
  components: {
    UserAvatar
  }
};
</script>