React Resim Ekleme

React JS ile uygulama geliştirirken projemize resim eklemek çoğu zaman zorunludur. Gerek logo ve gerekse sayfa içi diğer resimler tasarımımız açısından önemlidir.

React JS uygulamaya resim eklemek için farklı yöntemler sunar. Böylece o an ihtiyacımız olan şekilde resimleri uygulamaya ekleyebiliriz. Bu yöntemler şu şekildedir.

• Resimi React JS projesine import etmek.
• Resimi public klasörü içerisine taşıyarak kullanmak.

Şimdi bu iki farklı yöntemi inceleyelim.

React JS İmport Yöntemi İle Resim Ekleme

Eğer create-react-app ile bir uygulama geliştirdiyseniz, React logosu sayfaya eklenirken bir import işlemi yapılmıştır. Bunun için uygulama kök klasörü içerisinde resimleri tuttuğumuz bir klasörün olması gereklidir. Bu klasrö src klasörü içerisinde olabilir.

Klasör içerisine uygulamaya ekleyeceğimiz resimleri koyuyoruz. Şimdi src/img klasöründeki resim-1.jpg adlı bir resime nasıl ulaşacağımızı görelim.

import React from "react";
import resim1 from "./img/resim-1.jpg";

export default App() {
    return (
        <div>
            <h1>Resim Ekleme - İmport Yöntemi</h1>
            <hr />
            <img src={resim1}> alt="resim 1" />
        </div>
    );
}

Kodu incelediğimizde

import resim1 from "./img/resim-1.jpg";

şeklinde bir resimi import ederek resim1 değişkenine atadığımızı görüyoruz. Artık resim1 ifadesi ile bu resime ulaşabiliriz.

Bu işlemi <img src={resim1}> alt="resim 1" /> şeklinde yapıyoruz. Burada dikkat etmemiz gereken husus, resim1in bir değişken olduğu ve bu nedenle de JSX formatı içerisinde kullanılırken süslü parantezler {} içerisinde kullanmamız gerektiğidir.

Yine import ettiğimiz resimin tam yolunu doğru olarak girmemiz gerekiyor, aksi halde resim import edilemeyeceği için o resimi kullanamayacağız demektir.

React JS Public Klasöründeki Resimleri Kullanma

Diğer bir yöntem ise resimlerimizi public klasörü içerisinde koymaktır.

React JS Public Klasörü Nedir?

React JS uygulamasında her yerden ulaşılabilir dosyaların saklandığı özel klasöre public klasörü adı verilir. Bu klasör özeldir ve React JS uygulamasının kök dizininde bulunur. Buraya konulan dosyalara, JSX içerisinde import işlemi yapmadan ulaşılabilir.

Public Klasörü İçerisindeki Resimi Kullanma

Mesela bu klasörde olan bir sitil dosyasını, html sayfamız içerisinde kolaylıkla kullanabiliriz. Şimdi bu şekilde resim nasıl kullanacağımızı görelim. Bunun için public klasörü içerisinde bir img klasörü oluşturalım ve bu klasörün içerisinde resim1.jpg adında bir resim koyalım.

import React from "react";

export default App() {
    return (
        <div>
            <h1>Public Resim Ekleme</h1>
            <img src="img/resim1.jpg" alt="resim" />
            <hr />
        </div>
    );
}

Evet bu kadar basit. Resim eklerken img etiketinin src bilgisini girerken sadece, resimin public klasörü içerisindeki konumunu giriyoruz. Resimimiz img klasörü içerisinde olduğu için src=”img/resim1.jgp” şeklinde bir kullanım yeterli olacaktır.

Bu şekilde public klasörü içerisinde istediğimiz kadar resim bulundurabilir ve bunu normal bir websayfasına resim ekler gibi ekleyebiliriz. Çünkü public klasörü özeldir ve içerisindeki dosyalara tüm sayfa içerisinden erişme yetkisi vardır.

Sonuç

React JS uygulamalarında resim eklemenin iki yolunu bu yazımızda inceledik. Gerekli görüldüğünde resimleri direkt import ederek kullanabildiğimiz gibi, public klasörüne koyduğumuz resimlere web sayfasının her yerinden ulaşabiliriz.

React JS ile ilgili yaşadığınız deneyimleri buradan bizimle paylaşabilirsiniz.