React Uygulamasında Bir Resime Link Verme

React ile bir uygulama geliştirirken, bir resime link vermek için a etiketi veya eğer react-router-dom kullanılıyor ise, Link bileşenini kullanabiliriz. Şimdi bu iki yöntemi ayrı ayrı görelim.

A Etiketi İle React Uygulamasında Resime Link Verme

A bir HTML etikedir ve bir link vermek için kullanılır. Bunun için

<a href="link_adresi">link metini</a>

şeklinde kullanıyoruz.

Yine eğer bir resime link verilecek ise, A etiketi içerisinde IMG etiketi kullanıyoruz.

<a href="link_adresi">
    <img src="resim_adresi" alt="resim açıklaması" />
</a>

Aynı şekilde bir kullanım React için de geçerlidir.

import React from 'react';

function App() {
    return (
        <div>
            <a href="https://netbilio.com" target="_blank">
                <img src="https://netbilio.com/wp-content/uploads/2022/05/netbilio_logo_kare.png" alt="netbilio" />
            </a>
        </div>
    );
}

export default App;

Normal link kullanımından farklı değil.

react-router-dom Link İle Resime Link Verme

Şimdi uygulamamızda react-router-dom kullandığımızda, Link bileşeni ile bir resime nasıl bağlantı ekleyeceğimizi görelim. react-router-dom paketi hakkında ayrıntılı bilgi için React Router Nedir? Nasıl Kullanılır? okuyabilirsiniz.

Link bileşeni to parametresi ile gidilecek sayfanın adresini alır.

<Link to="gidilecek_adres">link metni</Link>

Yine eğer bir resime link verilecekse metin yerine IMG tagı kullanılmalıdır.

<Link to="gidilecek_adres">
    <img src="resim_adresi" alt="resim bilgisi" />
</Link>

Şimdi daha önce yaptığımız işlemi Link* ile tekrardan yapalım.

import React from 'react';
import {Router, Link} from 'react-router-dom';

function App() {
    return (
        <Router>
            <div>
                <Link to="/about">
                    <img src="resim_adresi" alt="about" />
                </Link>
            </div>
        </Router>
    );
}

export default App;

Sonuç

React JS ile uygulama geliştirirken bir resime bağlantı vermek için HTML A etiketini veya react-router-dom Link bileşenini kullanabiliriz.

React ile ilgili paylaşmak istediklerinizi bizimle yorumlardan paylaşabilirsiniz.