How do you create a circular image using nextjs Image? I have found that the solution involving wrapping the image in divs with border radius and hidden overflow isn't working.
import Image from 'next/image'
<Image src={props.profilePictureURL} height={200} width={200} alt='IMG2'/>
Add this to your css file.
img {
border-radius: 50%;
}
Answer:
<Image src={props.profilePictureURL} className={styles.makeImageCircular} height={200} width={200} alt='IMG2'/>
where:
.makeImageCircular {
border-radius:50%;
}
*mistakenly set 50% to '50%' (within a string in CSS)
Related
using Next 13 and Tailwind, i'm trying to render the some images of products from fakestoreapi on my e-commerce page, i want this images to have the same size so i'm using this code. But the images are not resizeing correctly.
this component only has one parent div with no properties.
<Image src={image} width={200} height={200} style={{ objectFit: "contain" }} />
do you know what could be the reason ? Let me know if i need to provide more info.
thankyou in advance
Setting height of your element via style attribute should override tailwind default.
<Image src={image} width={200} height={200} style={{ objectFit: "contain", height: "200px" }} />
I am trying to display images in my Next js project with Material UI here:
<Box display="flex" alignItems="center">
<Image
src={'/images/Profile.svg'}
alt={'Thumbnail-alt'}
width={300}
height={160}
style={{ background: '#252525e6', borderRadius: '6px' }}
/>
</Box>
But all it is showing is the alt tag of the image, not displaying the actual image.
I am using Material UI 5 and Nextjs 12 for this project. Thanks
To load static images, first import the file. E.g
import ProfileSvg from "/images/Profile.svg"
Then in your image.
<Image
src={ProfileSvg}
alt={"Thumbnail-alt"}
width={300}
height={160}
style={{ background: "#252525e6", borderRadius: "6px" }}
/>
I'm trying to apply a transparent Linear Gradient on an image.
I'm using Angular 7.2.0, tns-core-modules 5.3.1
Html:
<Image src="https://mdn.mozillademos.org/files/15525/critters.png" class="imgGrad"></Image>
Css:
.imgGrad{
height:80;
width:150;
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
This code works fine with IOS but not with Android.
It's actually expected, iOS supports multiple layers so there will be one separate layer to hold the background gradient above the image. With Android, it's just the background, the background won't be visible when you have the image on top of it.
The solution is to use a separate view above image for gradient.
HTML
<GridLayout class="container">
<Image src="https://mdn.mozillademos.org/files/15525/critters.png"></Image>
<StackLayout class="gradient"></StackLayout>
</GridLayout>
CSS
.container {
height:80;
width:150;
}
.gradient {
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
Somehow I could not figure this out. I have tried several solutions available online, but none of them worked.
Here is the issue. I have some wide images that I wanted to stack on top of each other. The height does not matter, but I want it to have a fixed width. For some reason, the images are being cropped.
I want it to look like this. For example, if you change .meat's height to 10px, it will resize but will maintain its ratio.
http://jsfiddle.net/iggyfiddle/mtL7e2jz/
This is the image code:
{items.map((item, index) =>
<View key={index}>
<View style={styles.imageWrapper}>
{ item.image_url_large && <Image style={styles.image} resizeMode='cover' source={{ uri: item.image_url_large }} /> }
</View>
</View>
)}
It is mapping over an array of several images.
I have tried:
a simple
const styles = {
image: {
height: 100
},
};
I tried following the same pattern on the fiddle, by giving it fixed height and width according to this SO post
const styles = {
imageWrapper: {
height: 50,
width: 400
},
image: {
height: '100%'
},
};
But it still crops the top bun and tomato
I have tried some solutions described on this GH discussion but they don't seem to work.
How can I automatically resize the image from web to fixed width without it being cropped?
use resizeMode='contain' instead of cover and specify the width and height.
<Image
style={{width:300,height:300}}
source={{ uri: display_image_small }}
resizeMode='contain'>
</Image>
I want an image to appear across the width of the screen, and be scaled so it retains its proportions.
I currently have this
<ScrollView style={styles.background}>
<Text>Some Header Text</Text>
<Image
style={{width: null}}
resizeMode="contain"
source={require("./assets/images/map.png")}
/>
</ScrollView>
which half works. The image is scaled correctly in width. but it is retaining its height, so there is a large border above and below the image.(ie the layout is still using the images height unscaled)
If I add a height: null or replace the width with a height then no image is displayed.
How do I do this (I expect) trivial thing?
(same behavior on ios and android.)
So I have had to calculate things myself.
This scales the image as I want, and the image is re-scaled when the phone is rotated.
I am not sure if componentWillMount is the right event to choose to calculate the width/height ratio. I would be happy for any other code review comments!
import React, {Component} from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
Button,
Dimensions
} from "react-native";
import resolveAssetSource from "resolveAssetSource";
import {Actions} from "react-native-router-flux";
export default class Main extends Component {
measureView(event) {
this.setState({
width: event.nativeEvent.layout.width,
height: event.nativeEvent.layout.width
});
}
componentWillMount() {
let source = resolveAssetSource(require("./assets/images/map.png"));
this.setState({ratio: source.height / source.width});
}
render() {
return (
<ScrollView
onLayout={event => this.measureView(event)}
>
<Text style={styles.header}>
Some Header Text
</Text>
<Image
style={{
width: this.state.width,
height: this.state.width * this.state.ratio
}}
resizeMode="contain"
source={require("./assets/images/map.png")}
/>
</ScrollView>
);
}
}