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}
Related
In my .NET MAUI app, I'm using the AvatarView in.NET MAUI Community Toolkit to create a nicely round user avatar which is pretty easy to do.
I now want to put a nice border around the image but I'm not getting the desired effect because when I set the BorderWidth property of the AvatarView, it places the border "inside" the image which makes the visible area smaller. I actually want to put the border "outside" the image so that I don't lose anything from the visible area. Here's an image that demonstrates this:
BTW, I tried setting the HeightRequest and WidthRequst larger and then setting the BorderWidth but it still seems to make the visible area smaller because all that's doing is that it makes the main image larger and with the border set, the visible area still doesn't show the additional data/area.
Here's my current code which places the border within the image -- which I can safely assume is the standard behavior.
<mct:AvatarView
ImageSource="{Binding UserInfo.AvatarUrl}"
BorderColor="{StaticResource UILightGray}"
BorderWidth="10"
CornerRadius="70"
HeightRequest="140"
WidthRequest="140"/>
How do I achieve the effect that I want? Basically, I'd like the border to go outside of the image, effectively adding some 10 pixels to the size of the image.
Alternatively, I don't mind placing the border within the image but I need a way to make the actual image 10 pixel smaller so that the visible area stays the same.
How can I achieve this by using or not using .NET MAUI Community Toolkit?
If you don't want to use the community toolkit package, then wrap the image with a Frame would be a trade-off for this scenario. And also you need to set the Aspect of the image to AspectFit.
<Frame HeightRequest="140"
WidthRequest="140"
CornerRadius="70"
HorizontalOptions="Center"
IsClippedToBounds="True"
Padding="0"
BorderColor="Gray"
Margin="0,0,0,0">
<Image
Aspect="AspectFit"
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="140"
WidthRequest="140"
VerticalOptions="Center"
HorizontalOptions="Center" />
</Frame>
Update:
You can also wrap a Border as Steve suggested.
<Border HeightRequest="160"
WidthRequest="160"
StrokeShape="RoundRectangle 80,80,80,80"
HorizontalOptions="Center"
StrokeThickness="8"
Margin="0,0,0,0">
<Image
Aspect="AspectFit"
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="160"
WidthRequest="160"
VerticalOptions="Center"
HorizontalOptions="Center" />
</Border>
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
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.
Transparent png image not showing as transparent in Xamarin Absolute Layout
<AbsoluteLayout BackgroundColor="Aqua">
<Image Source="#drawable/icon.png" AbsoluteLayout.LayoutBounds="0.5,0.5,30,30"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
Just change your background color to transparent in your <Image>.
Something like that.
<Image Source="#drawable/icon.png" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5,0.5,30,30"
AbsoluteLayout.LayoutFlags="PositionProportional" />
I have followed the simple example on Matererial-UI
import React from 'react';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
const DatePickerExampleSimple = () => (
<div>
<DatePicker hintText="Portrait Dialog" />
<DatePicker hintText="Landscape Dialog" mode="landscape" />
<DatePicker hintText="Dialog Disabled" disabled={true} />
</div>
);
But the output (image below) is not right, the blue label is not centered.
I am using: Material UI version 0.15.0-alpha.2, React 0.14.7, chrome 49
Am I missing something?
The DatePicker is being redesigned at the moment and this issue should be fixed among others soon.
Watch this Pull-Request for updates:
https://github.com/callemall/material-ui/pull/3739
If you need the layout fixed immediatly, use 0.15.0-alpha.1 or older