The problem is only with svg images. Works well with other formats
Hello! I am using an Image component in nextjs. I ran into a problem while trying to add an svg image to a modal window. When I open the modal the image is missing and it takes about a second to load. This happens every time the modal window is reopened.
I think this is due to "Lazy Loading". This option is very inappropriate in this case. I would like to load the image as soon as the user enters the site, and not during the opening of the modal window
I have tried several ways.
assign Image properties to the component
`
<Image
src={Email}
alt={"Picture"}
width={20}
height={20}
loading={"eager"}
priority
/>
`
Problem still exists. Loading an image takes a second of time after each modal window is opened
Load an image in the main component, and pass it through props to the modal window.
Problem still exists
My svg image is very small. I have also tried other images
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
I'm not sure how to make the 'Popover' component of Material UI remain fixed on the screen when I open it. Because when I open the popover (https://mui.com/material-ui/react-popover/) It's not blocking the scroll and the box that appears after clicking is moving along the entire page. I don't want to keep the scroll bar visible while popover is open.
I'm using the latest version.
Image below
enter image description here
You can add overflow: hidden; to body element and remove it on close :) Tho its a weird behavior in docs as in source code there is no such thing, yet it happens
I have local image loaded in to div.
backgroundImage: 'url('file://c:/image.jpg')'
But the problem is if I will delete or replace c:/image.jpg
my div image will stay the same(with old non existent image) even If I will re-mount the component.
Image will be stay the same. Only restating the application will work.
How can I refresh image?
I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs
want to create a portfolio/projects page where user click on thumbnail it goes full screen and other page comes in
i guess i can achieve this using pose-flip
https://codesandbox.io/s/fourth-react-pose-example-qj92p problem is how i can do it with multiple elements on page
this is the sample site
i'm new to react, when i click the thumbnail how to remove all others ( fade ), we can do it simply in jquery not selector