click an image for outside url react.js

Question

I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.

I am using React-Bootstrap which I don't know if that is going to change anything.

export default class Home extends Component {
render() {
    return (
        <Grid>
            <Jumbotron className="brainImg">
            </Jumbotron>
            <div class="footer"><center className="iconsBaby">
                <Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
                <Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
                <Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
            </center>
            </div>
        </Grid>
    )
}

Thank you for looking.

Ali Elzoheiry · Accepted Answer · 2018-07-26 07:46:11Z

30

Generally an Image component should not be a link on its own. What you should do is wrap your image component with an <a> tag or use the Link component if you're using react-router.

<a href="https://github.com/Joeyryanbridges">
  <Image src="giticon.png" className="githubIcon" />
</a>

OR with react-router Link

<Link to="https://github.com/Joeyryanbridges">
  <Image src="giticon.png" className="githubIcon" />
</Link>

This way the Image component is not concerned with redirects or changing URLs and that functionality is handled by the proper component or tag.

Always keep in mind that separation of concerns is very important when it comes to reusability and maintainability.

edited Jul 26, 2018 at 7:46

answered Jul 26, 2018 at 7:29

Ali Elzoheiry

1,6821 gold badge14 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joeyryanbridges Over a year ago

Zoheiry, you're the man! it works perfectly! Thank you so much!

Adnan · Accepted Answer · 2018-07-26 07:56:42Z

3

Just wrap tag inside an like this:

   <a href="abc.com">
    <Image src="abc.png" />
   </a>

Or If you are using react-router,then you can do this:

   import { Link } from "react-router-dom";

   <Link to="www.abc.com">
   <Image src="abc.png" />
   </Link>

Hope this help:

answered Jul 26, 2018 at 7:56

Adnan

1,70713 silver badges19 bronze badges

Comments

wierdoo · Accepted Answer · 2018-07-26 07:32:09Z

2

1.You can first declare in the state

load:false

2.use the onClick event and call a function like -

<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />

Inside the function set load to true.
Now check the value of the load to direct to whatever you need. I hope it works.

answered Jul 26, 2018 at 7:32

wierdoo

295 bronze badges

Comments

Ps066 · Accepted Answer · 2022-01-21 06:04:39Z

There is another method to it , which is just create a onclick attribute to your react element

<img src="<img-link>" alt="<alt-text>" onClick={link} />

and then outside the return statement of your react function you can use 2 methods to link the image which is

location.replace and location.href

both of which would have syntax as follow

window.location.href = "<link>";

and

window.location.replace("<link>");

the methode to use this both is as follow

 const link= () => {            //remember the onclick attribute mentioned in img tag is having name **link**

 window.location.href = "<the-link-to-which-you-want-to-redirect";

 }

in this way you can achive your desired output!!

line 6 contain the function and line 18 contain styled react image element... refer if you want

Note:-

window.locatio.replace("")

will replace the webpage , so some one clicking on the image would not be able to use back button of browser .

So use them according to your need!!

Sarah · Accepted Answer · 2022-01-27 03:43:27Z

1

The easiest way I've found is to just make sure you add target="_blank" rel="noopener noreferrer" to your tag. Like this:

<a href={ resume } target="_blank" rel="noopener noreferrer">
  <img className="resume" src={ resumeLogo } alt="Link to resume" />
</a>

answered Jan 27, 2022 at 3:43

Sarah

111 bronze badge

Comments

Hamed Vahedi · Accepted Answer · 2023-01-12 14:41:31Z

1

To use an image as a link in React, wrap the image in an 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.

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

The function code can be as follows:

<div>
    <Link to="/your-pagename-or-url">
          <img src="https://hamedvahedi.com/sample.jpg" alt="" />
    </Link>
</div>

answered Jan 12, 2023 at 14:41

Hamed Vahedi

494 bronze badges

Collectives™ on Stack Overflow

click an image for outside url react.js

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related