Giriş

React ile web uygulamaları geliştirirken, genellikle kullanıcıların ilgisini çekecek görsel öğeler eklemek isteriz. Bu görsel öğeler, JPG'ler, PNG'ler, SVG'ler, GIF'ler ve diğerleri dahil olmak üzere herhangi bir görüntü türü olabilir.

Bu yazıda, React ile görüntülerin nasıl içe aktarılacağını öğreneceğiz ve bunun elde edilebileceği çeşitli yolları göreceğiz.

Dış görüntüler ve yerel görüntüler, React uygulamamızda kullanmak istediğimiz iki görüntü türüdür. Bu makalede öncelikle yerel görüntülerle ilgileniyoruz çünkü harici görüntüler onları içe aktarmamızı gerektirmiyor.

Harici görüntüler, zaten harici olarak barındırılan ve bir URL aracılığıyla herkes tarafından erişilebilen görüntülerdir; yerel görüntüler ise yalnızca yerel bilgisayarımızda veya proje klasörümüzde bulunan ve uygulamamızda kullanmak istediğimiz görüntülerdir.

Harici Olarak Barındırılan Resimler Nasıl Görüntülenir

Resimleri nasıl içe aktaracağımıza geçmeden önce, başka bir yerde barındırılan resimlerin, HTML'de resimleri her zaman kullandığımız şekilde çalıştığını anlamak önemlidir - URL'yi src özniteliği img etiket:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

Şimdi React ile (yerel) görüntüleri nasıl içe aktarabileceğimizi öğrenelim!

React ile Görseller Nasıl İçe Aktarılır

Dış görüntülerin yanı sıra, görüntülerin React'te kullanılma şekli, diğer çerçevelerden ve hatta HTML'den önemli ölçüde farklıdır. Bu görüntüler, uygulamamızda kullanılmadan önce React'e aktarılmalıdır.

Bu iki yolla gerçekleştirilebilir: import ifadesini kullanarak veya require() işlev. Her iki yaklaşımı da ele alacağız.

Görüntüleri React Kullanarak Nasıl İçe Aktarırım? ithalat Açıklama

Okuması ve anlaması daha kolay olduğu için, import ifadesi, React'te yerel olarak depolanan görüntüleri içe aktarmak için en yaygın kullanılan yöntemdir. Görüntüler olarak kabul edilir varsayılan dışa aktarmave bunları içe aktardığımızda, bunu bileşenleri içe aktardığımız şekilde yaparız. Bu, içe aktardığımız görüntüye dosyadan göreli yol belirtilerek yapılır:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Yukarıdaki kodda, hala kullanıyoruz img etiket ve src özellik, ancak bu sefer src öznitelik, JSX'te küme parantezleri kullanılarak geçirilen bir dize yerine bir değişken alır.

Not: İstediğimiz kadar görüntü aktarabiliriz, ancak import ifadesinde her görüntünün benzersiz bir adı olmalıdır, aksi takdirde bir hata verir.

Dosyalar için göreli yolların nasıl belirleneceğini ve elde edileceğini anlamak önemlidir; aksi takdirde hatalar ve hatalar meydana gelebilir. Önceki örnekte, görüntü bir /src/images.

React ile React (Require()) İşlevini Kullanarak Görüntüleri İçe Aktarma

The require() function, geçerli dosya dışındaki dosyalardan harici modülleri dahil etmek için kullanılan bir Node.js işlevidir. İle aynı şekilde çalışır import ifadesi ve resimleri eklememize izin verir:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Tek fark, görüntüyü göreceli yolu aracılığıyla istediğimiz ve ardından onu img küme parantezleri ile etiketleyin.

Ayrıca bunu satır içi yapmaya karar verebilir ve zorunlu olmadığı için görüntüyü bir değişkene atamak için kullanılan fazladan satırdan kaçınabiliriz:

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

Sonuç

kullanarak yerel görüntüleri nasıl içe aktaracağımızı öğrendik. import açıklama ve require() Bu makaledeki işlev.