Rails 6.1 Webpacker 5 ile Resimleri Paketleme

Bu yazimizda Webpacker 5 in Rails uygulamalari icinde kullanim yapisina bakacagiz:

https://github.com/rails/webpacker

Webpackerin yapisi uygulama icinde asagidaki gibi olacaktir bu sayede kullandigimiz butun js, css, ve resim dosyalarimizi webpacker sayesinde bir paket halinde derliyebiliriz:

app/javascript:
  ├── packs:
  │   # Only webpack entry files here
  │   └── application.js
  │   └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

app/javascript/images icine webpacker in paketlemesini istedigimiz resimleri koyalim bunlar logo olabilir yada ornegin tarayicidaki kucuk icon olabilir.

Ardindan resimleri pakete tanitabilmek icin application.js dosyasinin icine asagidaki kodu ekliyelim:

const images = require.context('../images', true)

Bu sayede images/ klasoru altindaki resimler webpacker tarafindan algilanacaktir.

Bu resimleri rails uygulamamizda kullanabilmek icin asagidaki kodu:

<img src="<%= asset_pack_path 'images/logo.svg' %>" />

yada sirf bunun icin olusturulmus yardimci araciligiyla:

<%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>

kolayca resimleri kullanabiliriz.

Tarayici iconu icin ise asagidaki kodu <head></head> araligina eklememiz yeterli olacaktir:

<%= favicon_pack_tag 'icon.png', rel: 'icon', type: 'image/png' %>

Eger paket icindeki resimleri css icinde kullanmak istiyorsaniz asagidaki gibi kullanabilirsiniz:

.foo {
  background-image: url('../images/logo.svg')
}

0.00 avg. rating (0% score) - 0 votes
0 Comments

No Comment.