Cara Menampilkan Gambar Laravel Dengan Accessor getPictureAttribute

Untuk menampilkan gambar di tampilan Blade Laravel dengan mengambil atributnya, Anda biasanya akan bekerja dengan model yang berisi path atau URL gambar. Berikut adalah langkah-langkah untuk melakukannya:

1. Model

Pastikan model Anda memiliki atribut yang menyimpan path gambar. Misalnya, kita memiliki model Artikel dengan atribut `image`

// app/Models/Artikel.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Artikel extends Model
{
    use HasFactory;

    protected $fillable = ['judul', 'deskripsi', 'image'];
}

Sistem yang dijelaskan adalah bagian dari model Laravel yang menggunakan accessor untuk mengubah nilai atribut sebelum mengembalikannya. Berikut penjelasan tentang fungsi accessor getPictureAttribute:

Fungsi Accessor

public function getPictureAttribute()
{
    return asset('storage/' . $this->image);
}

Implementasi Penuh di Model

Berikut adalah implementasi penuh dalam model Artikel:

// app/Models/Artikel.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Artikel extends Model
{
    use HasFactory;

    protected $fillable = ['judul', 'deskripsi', 'image'];

    // Accessor untuk atribut 'picture'
    public function getPictureAttribute()
    {
        return asset('storage/' . $this->image);
    }
}

Cara Penggunaan di View

Di tampilan Blade, Anda dapat mengakses atribut picture untuk mendapatkan URL lengkap gambar:

<!-- resources/views/artikels/show.blade.php -->

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $artikel->judul }}</title>
</head>
<body>
    <h1>{{ $artikel->judul }}</h1>
    <p>{!! $artikel->deskripsi !!}</p>
    <!-- Menampilkan gambar menggunakan accessor 'picture' -->
    <img src="{{ $artikel->picture }}" alt="{{ $artikel->judul }}" style="width:100%; height:auto;">
</body>
</html>

Dengan penjelasan ini, Anda dapat melihat bagaimana accessor getPictureAttribute bekerja dan bagaimana cara menggunakannya untuk menghasilkan URL lengkap gambar secara otomatis di Laravel.

jangangan lupa memangil gambar dengan :

php artisan storage:link

Hubungi Kami

Cara Menampilkan Gambar Laravel Dengan Accessor getPictureAttribute