I'm trying to add the Next Image component to my project.
And I have a problem, the image disappears when I add layout='responsive'.
code:
<Box>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
Is there a solution? or any other way to optimize images?
Based on what is found here (https://github.com/vercel/next.js/issues/19314), it seems layout='responsive' has no intrinsic size. So you will have to add a width to the containing element.
You need to wrap the next/image into a container with display:block, so that the image will be displayed.
set height and width for the parent of the Image component :
<Box width={263} height={56}>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
ensure the parent element uses display: block in their stylesheet like Box component or div
Component
<div className="photo">
<Image
width={300}
height={300}
src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="photo"
layout="raw"
/>
</div>
<style jsx>{`
#media (max-width: 768px) {
.photo {
margin: 0 auto;
justify-content: center;
display: flex;
width: 200px;
height: 200px;
}
}
`}</style>
next.config.js
experimental: {
images: {
layoutRaw: true,
},
},
This worked for me, the image doesn't disappear and is responsive,
Related
I have created a Modal in which I add a Canvas from Recat Three Fiber.
The documentation says that Canvas should fill the parent's space.
To show it well, I added a yellow color to the Canvas parent as you can see in the picture.
However, Canvas doesn't want to fill that space.
The important thing is that when I change the size of the browser minimally, it works immediately.
Do I have something not defined in this way?
<Modal bodyStyle={{ height: "500px" }}>
<Content>
<Canvas
style={{
width: "100%",
height: "100%",
}}
>
<color attach="background" args={["skyblue"]} />
</Canvas>
</Content>
</Modal>;
const Content = styled.div`
width: 100%;
height: 100%;
background: yellow;
`;
IMAGE
I can't get the automatic proportionately height of the image
scss grid: works fine
.blocks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
row-gap: 100px;
column-gap: 18px;
#media screen and (max-width: 1400px) {
column-gap: 8px;
}
align-items: stretch;
#media screen and (max-width: 1450px) {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
#media screen and (max-width: 1000px) {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
Works fine while i have static width={900} and height={600}. How it looks
<div className={styles.blocks}>
{images.map((i) => <div key={i.url} className={styles.block}>
<Link href={`work/${i.id}`}><a>
{i.previewType === "video"
? <video style={{width: "100%", objectFit: "cover"}} playsInline autoPlay muted loop><source src={i.url} type="video/mp4"/>
</video>
:
<Image width={900} height={500} src={i.url} alt={i.title}/>}
<div className={styles.block__about}><h2>{i.title}</h2><p>{i.about}</p></div>
</a></Link>
</div>)}
</div>
But I will have images of different height
And when I try to do auto height it turns out like this
<div className={styles.blocks}>
{images.map((i) => <div key={i.url} className={styles.block}>
<div style={{position: "relative"}}>
<Link href={`work/${i.id}`}><a>
{i.previewType === "video"
? <video style={{width: "100%", objectFit: "cover"}} playsInline autoPlay muted loop>
<source src={i.url} type="video/mp4"/>
</video>
:
<Image layout={"fill"} className={styles.block__image} src={i.url} alt={i.title}/>}
<div className={styles.block__about}><h2>{i.title}</h2><p>{i.about}</p></div>
</a></Link>
</div>
</div>)}
</div>
When you use next Image with layout='fill', then the image will fill the space of first parent element with position relative.
Your div, which contains image, has position relative, but doesn't have fixed width and height.
Its width is determined by parent 'blocks' grid element, because of rule grid-template-columns. Columns are about width, not height.
Its height is determined by height of child div with h2.title and p.about. That's why it is so small and wide.
The best solution in your case would be to just set up fixed height and width on div with position relative, and adjust its values with media-queries on various resolutions. Give it a className and setup css rules position, width, height, don't mix inline styles with the one from css file.
I am new to React. I am trying to create react card for profile page like this. Basically, I want avatar component on top of the material-ui card as shown in the image.
How do I do that?
Thanks.
Here is my code so far
// profile.css
.getMoreContainer {
display: inline-flex;
padding: 30px;
height: 25%;
text-align: center;
}
// profile.js
<div className="getMoreContainer">
<Card style={{position: 'relative'}}>
<Avatar src={LikeButton}
style={{ position: 'absolute',
marginTop: '-5%',
marginLeft: '6%',
zIndex: 5}}
/>
Get More Boosts
</Card>
<Card>
<Typography>Get More Potatoes</Typography>
</Card>
</div>
I got a problem with framer-motion. I have modal with overlay and I want to overlay have a fading in animation but modal-container (his child element) to have and scale animation (from 1px width and height to 100vh and 100vw). I would like to prevent somehow overlay from scaling and just change his opacity by animation. Do you have any ideas on how to prevent child from parent's animation?
I'm framer-motion very beginner so sorry for probably shitty code :D
my code:
<motion.div
layout
data-isOpen={isOpen}
className="parent"
ref={modalRef}
>
<ModalContainer
initial={{opacity:0}}
animate={animate}
>
<div className="w-100 d-flex justify-content-end">
<Close
onClick={() => {
closeModal();
clearAllBodyScrollLocks(modalRef);
}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20.39 20.39"
>
<title>close</title>
<line
x1="16.39"
y1="16.39"
x2="4"
y2="4"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1"
/>
<line
x1="4"
y1="16.39"
x2="16.39"
y2="4"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1"
/>
</Close>
</div>
{children}
</ModalContainer>
</motion.div>
parent class :
.parent{
width: 1px;
height: 1px;
position: absolute;
justify-content: center;
align-items: center;
overflow: auto;
border-radius: 2%;
}
.parent[data-isOpen="true"] {
display: block;
background-color: rgba(0,0,0,0.3);
margin: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left:0;
z-index:2;
border-radius: 2%;
padding: 4rem 0;
}
disclaimer: if you have any other idea how to make it better, please tell me (i have only just one requirement to make modal-container scaling from button, which opens modal. I mean it grows from his center to position fixed)
Thanks for help
If you're asking how to not have the overlay scale, then you just need to apply the scaling animation to the ModalContainer element, instead of the parent. But in that case, the modal will still fade in since its parent element is fading in. Is that what you want?
I think your solution will be to not have the modal be a child of the overlay. That way you can animate the opacity of the overlay, and the scale of the modal without either affecting the other.
If you want to keep them in the same component (you probably do), you could just have them both be siblings of the same parent element.
Structurally, something like this:
<div>
<Overlay animate={{opacity: isOpen ? 1 : 0}} />
<Modal animate={{scale: isOpen ? 1 : 0}} />
</div>
The Problem
I have a simple List of components that renders a title and an simple <hr /> after it.
The list gets rendered correctly and every title has it's corresponding <hr /> except the first one
Here is a screenshot how it looks:
I don't have any custom styles in my project except this one (for a rich text editor called Draft.js:
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 2em;
box-shadow: inset 0px 1px 8px -3px #ababab;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
Other then that, no css files.
Here is the code that renders the list (it gets called in the parent for every list item I have):
return (
<div>
<h2>{props.title}</h2>
<p>Test</p>
<hr />
{renderPosts()}
</div>
);
Why is this happening? I played around with it in the dev tools and the missing<hr /> is actually there, but not visible but the styling seems ok. It makes no sense to me because the other hr's are there. Screenshot from the Dev Tools:
I found the problem.
It's another Bootstrap Component that overlapped the first element like #Gonzalo said.
This was the faulty code from the parent component:
return (
<div style={{ marginTop: 50 }}>
{/* TODO: implement AddRoom Component */}
{/* <OverlayTrigger
trigger="focus"
placement="top"
overlay={this.popoverTop()}
>
<Button>
<FontAwesomeIcon icon={faPlus} />
</Button>
</OverlayTrigger> */}
{this.renderRooms()}
</div>
);
I uncommented it and now I see the <hr /> I think now I have to give the OverlayTrigger just a bit margin and I'm guchi.