Rails 6.1 Webpacker 5 ile Resimleri Paketleme
erimicel 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.svgapp/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')
}
Recommended Posts
Ruby ve Temiz Kod Yazimi
5 Temmuz 2021
