vue 中带有 dropzone 的图像与 laravel 混合

Question

我正在使用 Dropzone 在 SPA 中使用 vue.js 上传图片，虽然路径是正确的但是图片没有出现不知道为什么！！ enter image description here 使用 vue 开发工具的屏幕截图

我使用的代码

<img
        :src="imageObject.data.attributes.path"
        :class="classes"
        ref="userImage"
        :alt="alt"
    >

控制器中的代码

$data = request()->validate([
        'image' => '',
        'width' => '',
        'height' => '',
        'location' => ''
    ]);

    $image = $data['image']->store('user-images', 'public');

    $userImage = auth()->user()->images()->create([
        'path' => $image,
        'width' => $data['width'],
        'height' => $data['height'],
        'location' => $data['location'],
    ]);

    return new UserImageResource($userImage);

我在 User.php 模型中使用

public function coverImage()
{
    return $this->hasOne(UserImage::class)
        ->orderByDesc('id')
        ->where('location', 'cover')
        ->withDefault(function ($userImage) {
            $userImage->path = 'user-images/cover-default-image.png';
        });
}

与 profileImage 方法相同和资源

return [
        'data' => [
            'type' => 'user-images',
            'user-image-id' => $this->id,
            'attributes' => [
                'path' => url($this->path),
                'width' => $this->width,
                'height' => $this->height,
                'location' => $this->location,
            ]
        ],
        'links' => [
            'self' => url('/users/'.$this->user_id)
        ]
    ];

Answer 1

这可能会发生，渲染组件时数据不存在，数据加载组件应该重新渲染后，尝试两种方法之一，

1. 
<img    v-if="imageObject"
        :src="imageObject.data.attributes.path"
        :class="classes"
        ref="userImage"
        :alt="alt"
    >

2.
<img    :key="imageObject.data.attributes.path"
        :src="imageObject.data.attributes.path"
        :class="classes"
        ref="userImage"
        :alt="alt"
    >

Answer 2

完成，最后将资源中的路径编辑为

return [
        'data' => [
            'type' => 'user-images',
            'user-image-id' => $this->id,
            'attributes' => [
                'path' => url('storage/'.$this->path),
                'width' => $this->width,
                'height' => $this->height,
                'location' => $this->location,
            ]
        ],
        'links' => [
            'self' => url('/users/'.$this->user_id)
        ]
    ];

vue 中带有 dropzone 的图像与 laravel 混合

images with dropzone in vue with laravel mix

laravel

vue.js

single-page-application

dropzone.js

laravel-mix