如何将用户个人资料图片加载到视图中。Laravel

How do I load a users profile image to a view. Laravel

提问by xslibx

I'm trying to create a social network site using Laravel. Users have profiles with profile pictures. The profile picture displays in 3 different size. 1 for the main profile page (176x176) a smaller version for comments (50x50) and a tiny version to display on the nav bar as a link to their profile (30x30)

我正在尝试使用 Laravel 创建一个社交网站。用户拥有带有个人资料图片的个人资料。个人资料图片以 3 种不同的尺寸显示。1 用于主个人资料页面 (176x176) 用于评论的较小版本 (50x50) 和用于在导航栏上显示为指向其个人资料的链接的小版本 (30x30)

In my database the users are stored in the users table:

在我的数据库中，用户存储在用户表中：

id->int->primarykey
media_id->int (id of the media set as the users profile picture)
first_name->varchar
last_name->varchar
email->varchar
password->varchar

The media_id will be the id of the users profile image. All user uploaded images will be stored in the public directory: public/images/users/{users id}/

media_id 将是用户个人资料图片的 ID。所有用户上传的图片都将存储在公共目录中：public/images/users/{users id}/

( however the user's profile image will be stored at public/images/users/{users id}/profilePictures/ )

（但是用户的个人资料图片将存储在 public/images/users/{users id}/profilePictures/ ）

The url to the image is stored in the medias table:

图片的 url 存储在 medias 表中：

id->int->primary
user_id->int (id of the user that uploaded the image)
mime_type->varchar
url->varchar

I'm having trouble figuring out how to set the user's media_id on the users table to the id of the media that contains the url of the image that the user uploaded as their profile picture.

我无法弄清楚如何将用户表上用户的 media_id 设置为包含用户作为个人资料图片上传的图像 URL 的媒体 ID。

Here is my route to the form for uploading profile picture

这是我上传个人资料图片的表格的路线

Route::get('{id}/edit-profile-picture', ['as' => 'profile_editProfilePicture', 'uses' => 'UsersController@showEditProfilePicture']);

UsersController@showEditProfilePicture :

用户控制器@showEditProfilePicture :

public function showEditProfilePicture($id)
    {
        $user = $this->userRepository->findById($id);

        return View::make('edit_profile-picture');
    }

Here is the form I use for the user to upload the image

这是我用于用户上传图像的表单

{{ Form::open(['route' => 'postProfilePicture', 'files' => true]) }}
  {{ Form::hidden('user_id', Auth::user()->id) }}
  <h5 class="post-type">Upload Picture</h5>
  {{ Form::file('media') }}
  {{ Form::submit('Update Profile Picture', ['class' => 'posting-submit-btn d-bluegreen-btn-thick']) }}
{{ Form::close() }}

Here is the route for when the form submits.

这是表单提交时的路由。

Route::post('edit-profile-picture', ['as' => 'postProfilePicture', 'uses' => 'MediaController@storeProfilePicture'])->before('csrf');

Here is the MediaController@storeProfilePicture. Note how I save the original image to the public/images/{users is}/profilePictures/ directory as well as make 3 different size images and save them there as well.

这是 MediaController@storeProfilePicture。请注意我如何将原始图像保存到 public/images/{users is}/profilePictures/ 目录以及制作 3 个不同大小的图像并将它们保存在那里。

class MediaController extends \BaseController {


    public function storeProfilePicture()
    {
        $media = new Media;

        $input = Input::all();

        $image = Image::make($input['media']->getRealPath());

        $name =  time() . '-' . Auth::user()->id . '.' . $input['media']->getClientOriginalExtension();
        $imagePath = public_path() . '/images/users/';
        $directory = Auth::user()->id;

        // check if directory exists, if not create the directory
        File::exists($imagePath . $directory . '/profilePictures') or File::makeDirectory($imagePath . $directory . '/profilePictures', 0777, true, true);

        $image->save($imagePath . $directory . '/profilePictures/' . $name)
              ->fit(176, 176)
              ->save($imagePath . $directory . '/profilePictures/' . '176thumb-' . $name)
              ->fit(50, 50)
              ->save($imagePath . $directory . '/profilePictures/' . '50thumb-' . $name)
              ->fit(30, 30)
              ->save($imagePath . $directory . '/profilePictures/' . '30thumb-' . $name);
        // save to database
        $media->url = $name;
        $media->mime_type = $input['media']->getMimeType();
        $media->user_id = $input['user_id'];
        $media->save();

        return Redirect::back();
    }
}

Media model

媒体模型

class Media extends Eloquent {
    /**
     * The database table used by the model.
     *
     * @var string
     */
    protected $table = 'medias';

    protected $fillable = ['url', 'user_id', 'mime_type'];

    public function user()
    {
        return $this->belongsTo('User');
    }
} 

User model

用户模型

class User extends Eloquent implements UserInterface, RemindableInterface {

    use UserTrait, RemindableTrait, EventGenerator, FollowableTrait;

    /**
     * Which feilds may be mass assigned
     * @var array
     */
    protected $fillable = ['first_name', 'last_name', 'email', 'password', 'media_id'];

    /**
     * The database table used by the model.
     *
     * @var string
     */
    protected $table = 'users';


    /**
     * @return mixed
     */
    public function media()
    {
        return $this->hasMany('Media');
    }

}

Here is the route to the profile page

这是到个人资料页面的路线

 Route::get('{id}', ['as' => 'profile', 'uses' => 'UsersController@show']);

Here is UsersController@show

这是 UsersController@show

public function show($id)
    {
        $user = $this->userRepository->findById($id);

        return View::make('profile')->withUser($user);
    }

Now, in the profile page I'm able to display the users first name easily:

现在，在个人资料页面中，我可以轻松显示用户的名字：

<h4>{{ $user->first_name }}</h4>

Im trying to figure out how to display the users 176x176 profile image.

我想弄清楚如何显示用户 176x176 的个人资料图片。

Since I saved the original image to public/images/users/{user id}/profilePictures/{image-name}

由于我将原始图像保存到 public/images/users/{user id}/profilePictures/{image-name}

then saved the image name to the media tableunder the urlfield

然后保存图像名称到media table下url现场

and made 3 different sizes of that image and renamed them to 176thumb-{image-name}, 50thumb-{image-name} and 30thumb-{image-name} and also stored them in the public/images/users/{user id}/profilePictures/{image-name}

并制作了 3 个不同大小的图像并将它们重命名为 176thumb-{image-name}、50thumb-{image-name} 和 30thumb-{image-name} 并将它们存储在 public/images/users/{user id }/profilePictures/{图像名称}

I assume that I can get the images by doing:

我假设我可以通过执行以下操作来获取图像：

<img src="images/users/{{ $user->id }}/profilePictures/176thumb-{{ $user->media->url }}" width="176" height="176">
<img src="images/users/{{ $user->id }}/profilePictures/50thumb-{{ $user->media->url }}" width="176" height="176">
<img src="images/users/{{ $user->id }}/profilePictures/30thumb-{{ $user->media->url }}" width="176" height="176">

But this does not work.

但这不起作用。

I check the public/images/users/ and I see that the images are in the directory. I check the medias table in the database and the user-id is correct, the mime_type is correct, and the url is correct

我检查了 public/images/users/ 并且我看到图像在目录中。我查看了数据库中的medias表，user-id正确，mime_type正确，url正确

but I do not know how to get the image to display on the page?

但我不知道如何让图像显示在页面上？

I know one of my problems is that the media_id in the users table does not get set (the user's media_id is suppose to be the id of the media that is the profile picture)

我知道我的问题之一是用户表中的 media_id 没有设置（用户的 media_id 假设是作为个人资料图片的媒体的 ID）

How do I set the user's media_id, when i'm saving the image's user_id, mime_type, and url to the database?

当我将图像的 user_id、mime_type 和 url 保存到数据库时，如何设置用户的 media_id？

and finally how would I call the url from the medias table that belongs to the user into the page?

最后，我将如何将属于用户的 medias 表中的 url 调用到页面中？

Thank you very much in advance, I really appreciate anyone taking time and effort to help me out.

非常感谢您，我真的很感谢任何人花时间和精力来帮助我。

回答by lukasgeiter

First, add a new relation to the Usermodel:

首先，向User模型添加一个新关系：

public function profilePicture(){
    return $this->belongsTo('Media', 'media_id');
}

Then when saving the new media, use associate

然后在保存新媒体时，使用 associate

$media->save();
$user = Auth::user();
$user->profilePicture()->associate($media);
$user->save();

And then in the view use {{ $user->profilePicture->url }}to retrieve the profile picture URL.

然后在视图中使用{{ $user->profilePicture->url }}检索个人资料图片 URL。

However while this should work, you might want to consider having a is_profile_pictureflag in the media table.

然而，虽然这应该有效，但您可能需要考虑is_profile_picture在媒体表中设置一个标志。