在 React.js 中使用图像作为链接

作者

在 React.js 中使用图像作为链接

Use an Image as a Link in React.js

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

应用程序.js
import {BrowserRouter as Router, Link} from 'react-router-dom';


export default function App() {
  return (
    <Router>
      <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>
    </Router>
  );
}

代码片段展示了如何在 React 中使用图像作为链接，用于 React 路由器链接和本机锚标记。

在引擎盖下，Link组件实际上只是一个<a>标签，所以同样的方法适用。

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

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

应用程序.js
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="/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>
    </Router>
  );
}
确保指定图像文件的正确路径（包括扩展名）。

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

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

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

React 路由器Link组件旨在仅用于内部导航。

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

–

发表评论