I am using gatsby-plugin-image's StaticImage component in my web app, and I am having trouble changing objectFit's property from 'cover' to 'contain.'
Here is a sample of my code:
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image'
export default function About() {
return (
<div id="about">
<Container fluid >
<Row className="justify-content-center align-items-center">
<Col md={12} >
<StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
</Col>
</Row>
</Container>
</div>
)
}
I have also tried using style={{ objectFit: 'contain' }} and imgStyle={{ objectFit: 'contain' }} to see if using those props would change the styling. I'm using Sass to style other parts of the website as well, and adding that styling option via Sass and class names isn't working either.
Any ideas as to why the default object-fit: 'cover' won't change?
There's a prop 'objectFit' (along with 'objectPosition') that can be passed to StaticImage directly. I'd try that. My guess is that your passed styles are being overwritten inside StaticImage, but passing the direct props would fix it. https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
I had to add style={{height: "100%"}} as a prop to StaticImage in order to make an image cover a full view-height container. The image wrapper does not automatically take the whole space of the container element.
Related
I am very new to react.js and JavaScript, so apologies in advance.
When I do as following in JavaScript:
<img
style="cursor:pointer;"
title="Click to edit image"
onclick="console.log(this);"
src="data:image/png" />
I would get below as a return value.
However, if I do the same thing in React as:
<img
style={{ cursor: "pointer" }}
title="Click to edit the diagram"
onClick={() => console.log(this)}
src="data:image/png" />
I would get undefined as the return value.
I just wanted to know why this is so, and how to get the same return property value in React as JavaScript.
all attributes usually in react wrap is curly braces except strings, you can either import logo at the start of the file like this
import React from "react";
function ImageComponent() {
return <img
style={{ cursor: "pointer" }}
title="Click to edit the diagram"
onClick={() => console.log("Click")}
<img src="data:image/png;base64,putYourBase64Here" />
/>
}
export default ImageComponent;
I'm suffering from implementing bootstrap in react. I set up bootstrap4 at the beginning but I got a bad layout then used react-bootstrap and I get the same issue. Th card body,title and button appear on the image itselfenter image description here
import React from 'react';
import { Card, Button } from 'react-bootstrap';
const WorkCard = () => {
return (
<div>
<Card style={{ width: '18rem' }} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card >
</div>
)
}
export default WorkCard;
Using sass was overriding the bootstrap so I fixed that.
I can't get bootstrap classes to work with react-bootstrap
I tried using bootstrap classes specifically flex properties in react-bootstrap but it doesn't seem to work. But on the docs it shows an example of them using it "https://react-bootstrap.netlify.com/layout/grid/", also the docs seem pretty vague so I went to bootstrap's docs but no avail there either.
I noticed when I change how many Col's (like this col md={4}) I want a specific col element to take up the positioning of this button changes even though it supposed to be in the center why is that ? Here is a example of my code
import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';
class Welcome extends React.Component {
render() {
return(
<div className="welcome">
<Container>
<Row className="justify-content-center">
<Col>
<Button variant="primary" size="lg">Large button</Button>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Welcome;
I'm fairly new to react as well, more so to react-bootstrap but I am very familiar with bootstrap, this has me ready to just use CSS grid or flex and not use bootstrap's grid lol. So if anyone can help me out that would be great and much appreciated.
Try This.
<Container>
<Row>
<Col md={{ order: 'last' }}>First, but last</Col>
<Col md>Second, but unordered</Col>
<Col md={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>
I'm using google-login package. I've tried to update the background image and dimension of the button, it doesn't seem to work or Am i doing it wrong? I can't find any examples in the docs on how to implement inline styling. I just read that it is an object, here is my code.
<GoogleLogin
className="rounded-circle"
icon={false}
clientId={process.env.REACT_APP_CLIENT_ID}
buttonText=""
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
style={{ backgroundImage:url(${val.image.url}),
width:50,
height:50
}}
/>
Plugin Any help on this would be helpful.
It seems not possible, you can use custom render method.
<GoogleLogin
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
render={renderProps => (
<button onClick={renderProps.onClick} style={customStyle}>This is my custom Google button</button>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
You can check here, css rules coming from external css files are ignored.You can read it here and here
or you can use alternative plug-in : react-google-button
Actually, you can combine both react-google-login and react-google-button :
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
import GoogleButton from 'react-google-button'
ReactDOM.render(
<GoogleLogin
clientId="your-google-app-client-id.apps.googleusercontent.com"
render={renderProps => (
<GoogleButton onClick={renderProps.onClick} disabled={renderProps.disabled}>Sign in with Google</GoogleButton>
)}
onSuccess={responseGoogleSuccess}
onFailure={responseGoogleFailure}
cookiePolicy={'single_host_origin'}
/>,
document.getElementById('googleButton')
);
return (
<Card>
<CardHeader
title="Full Name"
subtitle="#username"
avatar="./../assets/img/image.gif" />
<CardText expandable>
<div>
<p>{message}</p>
</div>
<div>
{tagElements}
</div>
</CardText>
</Card>
);
};
Folder structure:
- app
-- assets
--- img
---- image.gif
-- src
Do I need to import something on every js file where I would like to show images? Why can't I just point to the folder where it's located and just show it? What am I missing?
In the CardHeader component you will need to import the Image component from react native and supply the uri prop to that component to render. Here is the documentation for image
import {Image} from 'react-naitve'
One gotcha with react native is that you need to provide explicit width and height to the image in order for it to render. Otherwise it appears as 0x0.
So something like this within your CardHeader would work:
<Image
style={{width: 50, height: 50}}
source={{uri: props.avatar}} />
You have to import your image and then use it. It is enough to add the image path in your js file header. Example:
import myimage from 'XXX/images/x.png';
Then you have to show it like that:
<div className="myimage">
<img src={myimage} />
</div>
Let me know if it is works for you.