How to Use an Image as a Link in React.js

# Using an external Image as a Link in React.js

To use an image as a link in React, wrap the image in an <a> tag or a Link tag if using React Router.

The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page.

App.js

Copied!
import {Link} from 'react-router-dom';

export default function App() {
  return (
    <div>
      {/* 👇️ React Router link */}
      <Link to="/about">
        <img
          src="https://bobbyhadz.com/images/blog/react-usestate-dynamic-key/thumbnail.webp"
          alt="example"
        />
      </Link>

      <br />
      <br />

      {/* 👇️ Anchor link */}
      <a href="https://google.com" target="_blank" rel="noreferrer">
        <img
          src="https://bobbyhadz.com/images/blog/react-prevent-page-refresh-on-form-submit/thumbnail.webp"
          alt="example"
        />
      </a>
    </div>
  );
}

using external image as link in react

The code for this article is available on GitHub

The code snippet shows how to use an image as a link in React for both React Router links and native anchor tags.

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

Clicking on the image would cause the browser to navigate to the specified page or route.

I have also written a detailed guide on how to display an image from a URL or local path in React.

# Using a local Image as a Link in React.js

To use a local image as a link in React:

Import the image at the top of the file and set it to the src prop of the img element.
Wrap the image in a Link component or an Anchor tag.

App.js

Copied!
import {Link} from 'react-router-dom';

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

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

      <br />
      <br />

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

using local image as link in react

The code for this article is available on GitHub

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

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

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

If you link to an external URL, make sure to use the <a> tag and not the Link component.

The React Router Link component is intended to only be used for internal navigation.

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

If you have difficulties importing the image, check out my other article on importing images in React.

# Using a local Image as a Link with `require()`

You might also be able to use the require() function to use the image in your App without importing it.

App.js

Copied!
import {Link} from 'react-router-dom';

export default function App() {
  return (
    <div>
      {/* 👇️ React Router link */}
      <Link to="/about">
        <img src={require('./thumbnail.webp')} alt="example" />
      </Link>

      <br />
      <br />

      {/* 👇️ Anchor link */}
      <a href="https://google.com" target="_blank" rel="noreferrer">
        <img src={require('./thumbnail.webp')} alt="example" />
      </a>
    </div>
  );
}

using local image as link with require

The code for this article is available on GitHub

Make sure to specify the correct path as the require() function doesn't help you with autocomplete as a regular import statement does.

If you need to set an onClick listener on a Link element, click on the following article.

# Using a local Image from the `public` directory as a Link

If your images are located in the public directory, use an absolute path when setting the src prop on the img element.

For example, if you have an image located at public/images/thumbnail.webp, you would set the src of the img element to "/images/thumbnail.webp".

App.js

Copied!
import {Link} from 'react-router-dom';

export default function App() {
  return (
    <div>
      {/* 👇️ React Router link */}
      <Link to="/about">
        <img src="/images/thumbnail.webp" alt="example" />
      </Link>

      <br />
      <br />

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

using local image from public directory as link

The code for this article is available on GitHub

The code sample assumes that you have an image named thumbnail.webp located under public/images/thumbnail.webp.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Use an Image as a Link in React.js

# Using an external Image as a Link in React.js

# Using a local Image as a Link in React.js

# Using a local Image as a Link with require()

# Using a local Image from the public directory as a Link

# Additional Resources

Borislav Hadzhiev

# Using a local Image as a Link with `require()`

# Using a local Image from the `public` directory as a Link