时间戳

首页 > 解决方案 > 如何将反应网站重定向到其他带有图像的网站？

html - 如何将反应网站重定向到其他带有图像的网站？

问题描述

大家好，所以我正在尝试使用 react-bootstrap 创建一些网站，当他们点击我页脚上的某个徽标时，我想将我的用户重定向到另一个网站/链接，我该如何在 react 中做到这一点？因为我意识到该标签只会重定向我们网站的路径。

这是我的代码：

import { Container, Row, Col } from "react-bootstrap"
import '../CSS/Footer.css'

const Footer = () => {
    return (
        <Container fluid={true} className="p-0 footerContainer">
                        <Row>
                <Col sm={12} lg={4} className="text-center footerright">
                    <h3>Follow Us</h3>
                    <hr style={{border:'2px solid', color:'#FFFFFF', width:'25.7%', margin: 'auto'}}></hr>
                    <img src="FBLogo.jpg"></img>
                    <img src="IGLogo.jpg"></img>
                </Col>
            </Row>

            <Row>
                <Col sm={12} lg={12} className="text-center">
                    <hr></hr>
                    <p>Copyright © 2014 <br></br>All Rights Reserved</p>
                </Col>
            </Row>
        </Container>
    )
}

export default Footer

标签： htmlcssreactjsreact-bootstrap

解决方案

就像在普通 HTML 中一样，您将使用链接标签包装图像：

<a href="http://www.google.com/"><img src="FBLogo.jpg"/></a>
<a href="http://www.google.com/"><img src="IGLogo.jpg"/></a>

或使用workmap：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="stack_overflow" href="https://www.google.com/">
</map>

推荐阅读