迹忆客 专注技术分享

要将图像用作 React 中的链接，请将图像包装在 <a> 标记中，如果使用 React 路由，则将其包装在 Link 标记中。 将呈现图像而不是链接，单击图像将导致浏览器导航到指定页面。

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>
  );
}

代码片段展示了如何在 React 中将图像用作反应路由器链接和本机锚标记的链接。

在底层，Link 组件实际上只是一个 <a> 标签，所以同样的方法也适用。

单击图像将导致浏览器导航到指定的页面或路径。

如果我们需要使用本地文件系统中的图像作为链接，请导入该图像并将其设置为 img 元素的 src 属性。

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>
  );
}

确保指定图像文件的正确路径（包括扩展名）。

该图像必须位于项目的 src 目录中。

上面的示例假设与 App.js 组件在同一目录中有一个 thumbnail.webp 文件。

如果我们链接到外部 URL，请确保使用 <a> 标记而不是 Link 组件。

反应路由器链接组件旨在仅用于内部导航。

当 a 元素的 target 属性设置为 _blank 时，外部链接将在新选项卡中打开。 如果要在同一选项卡中打开外部 URL，可以删除该属性。