Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

vue js asset kullanımı

yalcin

<tr v-for="(brand, index) in brands" :key="index"

şeklinde tüm markalarıma ait verileri{{ brand.brand_name }} , {{ brand.brand_slug }} şeklinde çekiyorum birde resim var evet resim ekleyebildim koca pazar gününü resim ekleyebilme ile geçirdim şimdi şeyde takıldım gösterimde bi çok deneme yaptım en son şu haldeyim
<img :src="'{{ asset('/storage/brand/'. + brand.brand_image ) }}'">
çok yaklaştım gibi geliyo ama yok çalışmıyor malesef resimler gözükmüyor (bu arada php artisan storage:link komutunuda çalıştırdım )
ilk sorum resimi nasıl göstericem ?

ikinci sorum galiba birinci sorunun cevabıda burda emin değilim , resmi şöyle kaydediyorum

$image=$request->file('image')->store('brand','public');

bu yukardaki kod storage dosyasında brand diye bir klasör actıgını düşünerek mantıklı gelmişti , gerçi tamda öyle olmus storage/app/public/brand klasörü şeklinde yapı var içindede resimler gelmiş

veritabanına brand_image kısmına tüm resimler şöyle kaydolmus hepsinin başına brand/ koymuş

brand/aLhjCgr6th6YhmVPUm49d2kqhrIbUewlKMfqAPjd.jpg
brand/E7cuOQefvt9caO8Wp4tM1I2WgkT26HMZpcBLzRxb.jpg
brand/5uH33o3PACZenBCsLCm9fp9fyuCk2DqSD0ipwTxr.jpg

mgsmus

yalcin Laravel'de storage kullandığınızda her şeyi Storage facade'ı ile yapmanız gerekiyor.

Brand modeline bir tane accessor oluşturup içinde Storage::url() kullanarak resmin tam yolunu verin. Aynı şekilde bu işlemler de frontend tarafında yapılmaz. Frontend sadece gösterir.

yalcin

bende aklımca sadece göstermeye çalışıyorum bakalım biraz araştırayım

mgsmus

yalcin Aklınızda canlanması için şöyle bir resource örneği vereyim:

{
    "id": 1,
    "name": "Google",
    "logo": "google.png",
    "logo_url": "https://domain.com/storage/brands/google.png"
}

Burada logo_url bir accessor. Storage::url('brands/google.png') karşılığı. Artık Vue tarafında bir şey yapmanıza gerek kalmadı.

yalcin

 return Inertia::render('Admin/Brand/Index',[
            'brands' => Brand::all()
        ]);

ben bu yukardakini gönderip herşeyi v-for ile table içine basıyodum resimde geliyo tüm datalar ile onuda çekebilirim dedim neyse anladım bu benim için çok yeni şeyler inceleyeceğim . accessor kullanımını vs bakalım bu haftada bunla gecsin

yalcin

bunu anladım ilgili modelimde  bunu yaptım dökümantasyondan [https://laravel.com/docs/9.x/eloquent-mutators#accessors-and-mutators](https://laravel.com/docs/9.x/eloquent-mutators#accessors-and-mutators)

protected function BrandName(): Attribute
    {
        return Attribute::make(
            get: fn ($value) => ucfirst($value),
        );
    }

ucfirst ilk karakteri büyütüyor anladım , BrandName BrandImage olacak olmasınada path nasıl olucak
get: fn ($value) => ....

yalcin

şöyle bişiler salladım

protected function BrandImage(): Attribute
    {
        return Attribute::make(
            get: fn ($value) =>  Storage::url($value),
        );
    }

şöylede gösterimi var
<img :src="brand.brand_image" class="w-10 h-10 rounded-full">
doğrumu çok emin değilim , birde şöyle ilginç birşey var

$table->string('brand_image'); tablo adım bu ama fonksiyonda
protected function BrandImage() böyle kullanmam gerekti galiba otomatik çeviriyo

mgsmus

yalcin

protected function brandImageUrl(): Attribute
{
    return Attribute::make(
        get: function ($value, $attributes) {
            return isset($attributes['brand_image'])
                ? Storage::url(($attributes['brand_image'])
                : null;
        },
    );
}

$item->brand_image; // google.png
$item->brand_image_url; // https://domain.com/storage/brands/google.png

sineld

Appends ile de yapılabilir:

https://laravel.com/docs/5.0/eloquent#array-appends

yalcin

@sineld in söylediği Appends ile nasıl yapılıyor şu an ona bakıyorum gerçi bulamadım bir örnek ama bulursam paylaşıcam . eğerki modelde birsey tanımlamadan nasıl yaparım bunun basit bir yolu yok mu diyen olursa şöyle birşeyde gayet basit ve anlaşılır

ilgili controller

public function index()
    {
        return Inertia::render('Admin/Brand/Index',[
            'brands' => Brand::all()->map(function($brand){
                return [
                    'id' => $brand->id,
                    'name' => $brand->brand_name,
                    'slug' => $brand->brand_slug,
                    'image' => asset('storage/'. $brand->brand_image)
                ];
            })
        ]);
    }

ön yüz ise

  <tr v-for="(brand, index) in brands" :key="index" >
                        <td class="p-4 w-4">
                            {{ brand.id }}
                        </td>
                        <td class="p-4 w-4">
                      
                          {{ brand.name }}

                        </td>
                        <td class="py-4 px-6">
                            {{brand.slug}}
                        </td>
                        <td class="py-4 px-6">
                            <img :src="brand.image" class="w-10 h-10 rounded-full">
                        </td>

şeklind ebasitcede resme ulaşılabiliyor

mgsmus

yalcin asset() yerine Storage::url() kullanmalısınız. asset() statik dosyalar için, sizin yüklediğiniz dosyalar için değil.

yalcin

mgsmus tamam teşekkür ederim