带有 laravel mix 的 vue 中带有 dropzone 的图像

Question

我正在使用 Dropzone 使用 vue.js 在 SPA 中上传图像，虽然路径正确但图像不出现不知道为什么！ 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

完成，最后通过编辑资源中的路径来进行

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)
        ]
    ];

Answer 2

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

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"
    >