I am using Next JS and Material UI together in my project. for Image optimization, I would like to use the Next JS Image component.
currently, my card media looks like below. I am getting the image URL row.image.url from an API call and assigning it to the image prop of the CardMedia component
<CardMedia
className={classes.cardMedia}
image={row.image.url}/>
But I would like to take the advantage of the Next JS Image component for the optimization and lazy loading but couldn't able to see a way to fit this.
import Image from 'next/image'
Did anyone face this type of requirement?
Appreciate your help
Thanks
Venk
You can do it like this:
<CardMedia className={classes.cardMedia} title="Your title">
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<Image src={row.image.url} layout="fill" objectFit="cover" />
</div>
</CardMedia>
Check this answer for more info
Related
I'm trying to add a banner to my React App for the profile page, using MUI since there is no specific "Banner" Component, what would be the most appropriate component to use for a banner in Material UI?
The Youtube Account page banner is kind of what I want, I would like the banner to be mobile-friendly.
<div className="Profile">
//banner here
<Stack alignItems="center" pt={8}>
<Avatar
sx={{
width: 200,
height: 200,
}}
src={dummyurl}
></Avatar>
<username>Test Name</username>
</Stack>
</div>
The Following tags could be used :
Img tag (Vanilla HTML)
Paper
Avatar
Thanks
I have a map, but it repeats. I would like it to stop repeating, and get only one map. How do I do this?
<MapContainer
className='h-[700px] w-[700px] float-right mr-10 mt-10'
center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
<TileLayer
noWrap={true}
url="/allmap.jpg"
/>
</MapContainer>
I see that you added in the URL a path to image url="/allmap.jpg". as it's an image you can inspect on the TileLayer after it's rendered. see on the right side the class which contains this image as background-image add to that class the following.
.tile-layer-class {
background-repeat: no-repeat;
background-size: cover;
}
UPDATE:
The problem was that the image was not shown. because there was a style from leaflet.css hide the image to show. you can override that style by using the below class.
.leaflet-container {
overflow: unset <= or by using !important as well if that didn't reflect.
}
The problem is not related to styling at all. what I figured out that the image is not only rendered just one time in the dom but it's gets rendered for 4 images tags. you can inspect the image and you will see that there're 4 img tags in the dom.
I think you will need to find out the reason for why there're 4 images rendered in the dom.
I tried to be honest to do my best. but I'm not familiar with Next.js
In Material UI the components that display images have a parameter for the image. eg:
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
In Next.js v10 there is a new Image component that automatically scales images: https://nextjs.org/docs/api-reference/next/image
Has anyone figured out how to use the new Image component with Material UI?
I am able to use it like this and it works well. I hope it will be helpful.
<Avatar className={className}>
<Image src={src || placeholder} alt={alt} layout="fill" />
</Avatar>
import image_1 from "/static/images/avatar/1.jpg" //locate image
then just replace
src="/static/images/avatar/1.jpg"
to
src={image_1.src}
Material-ui's Card component can have a CardMedia component as a child that accepts image source as a prop. Gatsby-image on the other hand requires it's own source as a prop(fixed or fluid).
<Card>
<CardHeader title={title}/>
<CardMedia src={image.localFile.childImageSharp.fixed} component={Img} />
</Card>
Is there any workaround for this issue?
Both, <CardMedia> and <Img> are wrappers themselves. The first one accepts children as a prop (as shown in their documentation) and <Img> from Gatsby-image is a container with its own features (responsive sizes, lazy loading, etc), not an image itself.
You can easily fix it by wrapping the <Img> with the <CardMedia>:
<Card>
<CardHeader title={title}/>
<CardMedia>
<Img fixed={image.localFile.childImageSharp.fixed} />
</CardMedia>
</Card>
Gatsby image isn't here just for getting source of the image, it has its own features which requires that it has its own container.
On the other hand CardMedia is dedicated container for showing image from source.
To fix your issue simply mimic behaviour of CardMedia component. This is simple container just holding image anyway.
I am trying to input a form into my html and when I view the page, I don't see the entire form, just the start of the form. The code is below of my html and form script.
<section id="content">
<div class="container_12">
<article class="a3">
<h4>Careers</h4>
<p class="p2">
<a name="form1160016477" id="formAnchor1160016477"></a>
<script type="text/javascript" src="http://fs23.formsite.com/include/form/embedManager.js?1160016477"></script>
<script type="text/javascript">
EmbedManager.embed({
key: "http://fs23.formsite.com/res/showFormEmbed?EParam=m%2FOmK8apOTB8lIDHQTyQ62rYe2Y6sJfY&1160016477",
width: "100%"
});
</script>
<!-- Notes:
To control the width of the form, change width: "100%" to any number or percentage.
To pre-populate fields in the form or to use a custom resize callback, see http://fs23.formsite.com/documentation/embedded-form.html
-->
Here is the website: http://www.creativemindspcs.org/englishapplication.html
The problem is the iframe height, you need to add height:800px; to the iframe style in the html. At the moment it is set at the default which is too small so the iframe window doesn't show everything.
As the iframe is generated dynamically with the JavaScript it should be possible to pass in a height parameter like you do width, if that is the case then this would fix it:
EmbedManager.embed({
key: "http://fs23.formsite.com/res/showFormEmbed? EParam=m%2FOmK8apOTB8lIDHQTyQ62rYe2Y6sJfY&1160016477",
width: "100%",
height: "800px"
});
If te 800px doesn't fix it you could try 100% for height but generally speaking heights and percents don't mix very well.
i have recently had to implement this and the forms now support resizeCallback, so you can set height via javascript
https://fs8.formsite.com/documentation/embedded-form.html