JIYIK CN >

To use an image as a link in React, wrap the image in a < <a>img Linksrc="https://github.com/react-route/images/blob/master ...

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


export default function App() {
  return (
    <Router>
      <div>
        {/* 👇️ react router link */}
        <Link to="/tm/xwzj">
          <img
            src="https://www.jiyik.com/demo_source/thumbnail.webp"
            alt="example"
          />
        </Link>

        <br />
        <br />

        {/* 👇️ Anchor link */}
        <a href="https://tools.jiyik.com" target="_blank" rel="noreferrer">
          <img
            src="https://www.jiyik.com/demo_source/thumbnail.webp"
            alt="example"
          />
        </a>
      </div>
    </Router>
  );
}

The code snippet shows how to use images as links in React both with react router links and native anchor tags.

Under the hood, Linka component is really just a <a>tag, so the same approach applies.

Clicking the image will cause the browser to navigate to the specified page or path.

If we need to use an image from the local file system as a link, import that image and set it as the srcimg attribute of the element .

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

// 👇️ import the image
import myImage from './thumbnail.webp';

export default function App() {
  return (
    <Router>
      <div>
        {/* 👇️ react router link */}
        <Link to="/tm/xwzj">
          <img src={myImage} alt="example" />
        </Link>

        <br />
        <br />

        {/* 👇️ Anchor link */}
        <a href="https://tools.jiyik.com" target="_blank" rel="noreferrer">
          <img src={myImage} alt="example" />
        </a>
      </div>
    </Router>
  );
}

Make sure to specify the correct path to the image file (including the extension).

The image must be located in the src directory of your project.

The examples above assume that there is a thumbnail.webp file in the same directory as the App.js component.

If we are linking to an external URL, make sure to use <a>the <img src="https://github.com/openwrt/blob/master/webpack-links/src/main Link...

The react router-link component is intended to be used for internal navigation only.

When the target attribute aof the element is set to , external links will be opened in a new tab. You can remove the attribute if you want the external URL to open in the same tab._blank