import styled from 'styled-components';
import bannerImage from '../img/bannerImage.jpg';
console.log(bannerImage);
const StyledBanner = styled.div`
margin-top: 55px;
width: 100%;
height: 20px;
background-color: red;
`;
function Banner() {
return (
<StyledBanner>
{/* <img src={`http://github.com/someprofile.png`} /> */}
<img src={require("../img/bannerImage.jpg")} />
<img src={bannerImage} />
</StyledBanner>
);
};
export default Banner;
I have this React Component that I am trying to return a local image, but this image never loads, it show the image is there but it is always broke.
I tried using require method and also the import but nothing works.
When it is an external image it works fine, only when it is local it doesnt work.
Could you please advise me how to correct this issue?
The final element that comes out of this is a DIV and those 2 images there appear as broken images, but if I change the src to a online picture it works fine.
<div class="sc-eDvSVe YFPxO">
<img src="[object Module]">
<img src="[object Object]">
</div>
I think the fix is going to be to use require("../img/bannerImage.jpg").default, because require returns an object with a default property that you have to access.
Example from an old project of mine:
If I set my state like this:
setProfileImg(require("../images/" + res.data.profileImg));
it has the value of this object:
{
"default": "/static/media/1640086164286.e03de477.png"
}
And so by using .default I access the actual image path I want.
Related
have problem with avatar, when I change size (28, 18, 16) - everything is fine.
But when I change size to 24, 22, 20 and other - image is hidden.
Here is my screenshots and code:
Img Component:
import Image from "next/image";
function Img(props) {
return (
<>
<div className={`relative flex h-[${props.size}px] w-[${props.size}px]`}>
<Image
src={
"https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2095&q=80"
}
alt="image"
fill
style={{
objectFit: "cover",
borderRadius: "999px",
}}
/>
</div>
</>
);
}
export { Img };
import { Img } from "../../elements/common/Img";
export default function AvatarPage() {
return (
<>
<div className="flex p-24">
<Img size={14} />
</div>
</>
);
}
Example 1
Example 2
What I do wrong?
Example 3 - if I change size to 38px the image will appear
That is simply not how Tailwind works.
Tailwind just-in-time basically scrapes all of your files (that matches paths in your content from tailwind.config.js) for existing classes and add them to the final distributed CSS. It is totally impossible to create Tailwind dynamic classes via props. You should use style= to add Height.
As a little tip, in the case the possible classes to be generated would be predictable (not [] values, but Tailwind classes), you can make usage of safelist which you can find the documentation here.
I map over an array of colors, which is defined in the database. I want to pass this colors as background for the created divs. Like I am used to, the console shows me, that the colors out of the array are passed in as prop. But using the props in styled components not works in typescript. I tried the following, what I have found in the net:
import * as types from 'styled-components/cssprop'
import type {} from 'styled-components/cssprop';
/// <reference types="styled-components/cssprop" />
I only passed this variations into my file.
The both snippets:
<ColorHolder>
{item.colors.map((color)=>(
<div color={color}></div>
))}
</ColorHolder>
css:
& div{
width:20px;
height:20px;
border-radius:50%;
background:${props=>props.color};
}
As far as I understand your code, you don't need to use any libraries.
Here is the working example, where colors in the array you fetched from backend
<div>
{
colors.map(color=>(
<div style={{backgroundColor: color, height: "50px",width: "50px"}}>
.
</div>))
}
</div>
Here's full example - codesandbox.io
Only styled components can receive props for this style adaptation technique.
Therefore in your case simply create a quick styled div:
const StyledDiv = styled.div<{ color: string }>`
background: ${props => props.color};
`;
<ColorHolder>
{item.colors.map((color) => (
<StyledDiv color={color}></StyledDiv>
))}
</ColorHolder>
I'm trying to add a background image to an entire welcome page in NextJS and it's just not working. Before, I was having trouble with the fact that NextJS seems to render every component inside a master component that becomes an html div with a class of "__next". Therefore, every time I try and add a background image that takes the full page, it is only as big as the "__next" div and is cut off. I tried using NextJS' image component, but now it doesn't even load the image and just displays the alt text. Can anyone tell me how to fix the following code?
import React from "react";
import styles from "/styles/WelcomePage.module.css";
import Card from "/Components/Card";
import Link from "next/link";
import Image from "next/image";
function WelcomePage() {
return (
<>
<Card>
<h1 className={styles.title}>Welcome to Class Chooser</h1>
<button type="button">
<Link href="/ClassSearch"> Class Search </Link>
</button>
<Image
src="/images/graduates.jpg"
alt="Cartoon graduates jump with happiness"
quality="100"
layout="fill"
/>
</Card>
</>
);
}
export default WelcomePage;
To add a background image simply do it via CSS:
.card {
background-image: url("/images/graduates.jpg");
}
make your parent component (Card) position relative and add below properties to next-image.
layout="fill"
objectFit="cover"
position relative should be there for which you need to apply image as a background.
When you add layout="fill" to Image you need to wraper Image component in parent element and assing postion property to parent (relative, absolute, ...).
Wrap your Image inside a parent div, and make your parent position fixed
<div className="bg-image-wrapper">
<Image
src="/images/graduates.jpg"
alt="Cartoon graduates jump with happiness"
quality="100"
layout="fill"
/>
</div>
In css
.bg-image-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
I want to make my button and status symbol smaller they are way too big for the screen chat.
Here is my JSX file
import React from 'react';
import closeIcon from '../../icons/closeIcon.png';
import onlineIcon from '../../icons/onlineIcon.png';
import './InfoBar.css';
const InfoBar = ({room}) => (
<div className="infoBar">
<div className="leftInnerContainer">
<img className= "onlineIcon" src={onlineIcon} alt="open 6342 56837 Image" />
<h3>{room}</h3>
</div>
<div className="rightInnerContainer">
<img src={closeIcon} alt="close 6342 56837 Image"/>
</div>
</div>
)
export default InfoBar;
Thank you so much
In the attached image you have defined an inline style like this
<div className="leftInnerContainer" style={{"width:60px"},{"height:30px"}}
You have the right idea, but the syntax for the style prop is wrong - hence the compilation error.
It needs to be a plain Javascript object, for which the correct syntax is this
{ width: "60px", height: "30px" }
And in the style prop in JSX, looks like this
<div className="leftInnerContainer" style={{ width: "60px", height: "30px" }}
You should give the css you are importing too given it can be solved through that.
That aside, just pass with either the css or the style prop a max height and/or width and it should work.
Note: if you set a max width or height you don't need to specify the other, just set it to auto and it will retain the proportion.
If you attach the css i can give you additional help.
You can also pass inline styles
<img className= "onlineIcon" src={onlineIcon} style={{height:"20px",width:"20px"}}alt="open 6342 56837 Image" />
I have storybook components, that I use in my project. So I need to use Card component in my project, which needs to be added some styling. So I add style using "styled" from styled-component. After I export my new CardNew and try yo use it in some pages. It works, but when I try to add onMouseLeave/onMouseEnter events to that component, it does not work.
When I try to use Card's initial version from storybook, without any styling and add event, it works.
Here is my code.
const CardStyled = styled(Card)`
width: 200px;
height: 100px;
margin-bottom:10px;
color:red;
line-height: 1.5em;
`;
export default function CardNew(props) {
return (
<CardStyled>
<Card.Body>
<p>{props.content}</p>
</Card.Body>
</CardStyled`enter code here`>
)
}
And then I use that component and try to handle any event
<CardNew onMouseEnter={() => onMouseEnter()} onMouseLeave={() => onMouseLeave()} >
</CardNew>
Can anyone explain why I can't make styling on storybook component, then use it?
Thanks.
Because your CardNew component is not HTML component. So, you should pass all props donw. Like:
export default function CardNew(props) {
return (
<CardStyled>
<Card.Body>
<p {...props}>{props.content}</p>
</Card.Body>
</CardStyled`enter code here`>
)
}
This will allow you to handle any event to element.