Question

我正在Laravel Storage中保存一个图像，它坚持像这样的数据库路径：

if($request->hasFile('avatar')) 
      {
        $avatar = $request->file('avatar');
        $path = $avatar->store('images/profile');

         $thumbnailName = "avatar".Date('YMdhis');
        $avatar->move(public_path('images/profile'), $thumbnailName);

      }
      //Save path to the database
      $avatar_path = new UserProfile;
      $avatar_path->avatar = $path;
      $avatar_path->save();

  The challenge  I am having is displaying the image in VueJs front. Here is my vue template:



<img :src="profile.avatar" alt="Profile Photo Image" width="200" height="200" class="img-thumbnail"/>

//This obviously does not work because profile.avatar contains relative 
path of the image as saved in the database
  **JavaScript**
<script>
      export default
{
    name:'ListProfile',
    data(){
        return{

          profile:{} //storing image path as fetched from database

        }
    },
    }
      </script>

我还使用artisan命令存储从'public / storage'符号链接到'storage / app：link

这是我在main.js中的基本网址：

 axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'

有任何帮助吗？提前谢谢。

Answer 1

你应该在Storage facade的帮助下返回url，尝试获取这样的url： Storage::url($profile->avatar)

您刚刚从控制器返回模型吗？

Answer 2

只需在后端使用url（）帮助器即可生成图片的完整网址，并将其作为道具传递给vue组件。

$profile->avatar = url($profile->avatar);

然后将$ profile（或直接根据您的需要直接创建并传递$ avatar）作为道具传递给Vue。

Answer 3

<img :src="/uploads/ + profile.avatar">

我的文件夹结构是public / uploads /

如何从Laravel Storage显示图像到vue前端

3 个答案: