изображения с dropzone в vue с laravel mix - PullRequest
Новая
       113

изображения с dropzone в vue с laravel mix

0 голосов
/ 18 июня 2020

Я использую Dropzone для загрузки изображений в SPA, используя vue. js, хотя путь правильный, но изображения не появляются, не знаю почему !! введите здесь описание изображения снимок экрана с vue dev tool

код, который я использую 

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

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Готово, наконец, отредактировав путь в ресурсе на 

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)
        ]
    ];
0 голосов
/ 18 июня 2020

это может произойти, данные отсутствуют при визуализации компонента, после того, как компонент загрузки данных должен повторно визуализироваться, попробуйте один из двух подходов, 

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