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.

Anywheres

Answer 1

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.

Riffe

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

Answer 2

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:

Usufruct

Answer 3

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()} />

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

Jesse

Answer 4

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!!

Georginageorgine

Answer 5

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>

Primrosa

Answer 6

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>

Cyrilcyrill