Menu
This doesn't display an image, but still works as a button.
<button><img src={"./img/google.png"} /></button>
My folder setup is /user/img/google.png and /user/loginGoogle.jsx , so I don't think there is a problem with source
554
To use an image as a link in React, wrap the image in an <a> 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.
The image buttons in the HTML document can be created by using the type attribute of an <input> element. Image buttons also perform the same function as submit buttons, but the only difference between them is that you can keep the image of your choice as a button.
import Logo from './images/react-logo. png'; const App = () => { return ( <div> <img src={Logo} alt="React Logo" /> </div> ); }; In the code above, we still use the img tag and src attribute, but this time the src attribute receives a variable rather than a string, which is passed using curly braces in JSX.
So let us import an image component and attach to the button (which is TouchableOpacity). Attach this image component to our button. The full program becomes as this: import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native'; export default class App extends React.
This will work:
<button><img src="./img/google.png" alt="my image" onClick={this.myfunction} /></button>
then if you define:
myfunction() {
console.log("CLICKED");
}
and if you click your image you will see CLICKED appearing in the console.
So if you add the onClick listener to your image it will work. Then you can wrap that image in a button and even add some CSS class to it to match your needs.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
