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" }} />
Related
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" }}
/>
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)
Following is my code
<TouchableOpacity style={{backgroundColor: 'pink', height: 100, width: 100}} activeOpacity={0.5} onPress={() => console.log('On Press'}>
<Image source={} style={{height: 50, width: 50, borderRadius: 25} imageType ={'profilePhoto'}/> />
</TouchableOpacity>
TouchableOpacity's size is bigger than theImage. If I touch outside of Image then onPress is working. But If I touch over the Image then onPress is not firing.
This is happening only in iOS. Working as expected in Android. I am using RN0.63
Am I missing anything here?
It seems that you are using an unofficial Image component. Any nested Touchable or other gesture component in it will affect your click results.
Try to use the official Image component. Or read the docs of the component you are using. It may has its own onPress event.
<View style={{alignItems:'center',marginTop: 15, height:320,backgroundColor:'#fff',paddingTop:10}}>
<TouchableOpacity style={{position:'absolute',right:15,top:25,elevation:2}}>
<Icon name="share-social-outline" size={30} color="#0057ff"/>
</TouchableOpacity>
<Carousel
autoplay
autoplayTimeout={5000}
loop
index={0}
pageSize={BannerWidth}
>
{images.map((image, index) => renderPage(image, index, navigation))}
</Carousel>
</View>
</View>
I used TouchableOpacity on icon and Gave Elevation to Touchable Opacity which is on image carousel, Its Not working. Please Help
I got the answer by experimenting myself; In Order To get Touchableopacity on icon over Image Carousel, we just need to use 'zIndex=3' Not 'elevation'.
I have a listview where i want to show image on each row and I don't want to show whole 25 images at once. I just wanted to load image which come in viewport.
I am getting url in props
<Image source={{uri: this.props.media.image_url}}
style={{ width:this.props.media.width,
height: this.props.media.height}}
/>
How can I achieve this in react native.
Note: I have tried these library but none working for me. Probably the version issue that it has written for old version of react Plus some of it does not work with dynamic props
react-native-lazyload
react-lazy-load
You can use react native elements.
Add to project: npm install --save react-native-elements
Usage:
import { ActivityIndicator } from 'react-native';
import { Image } from 'react-native-elements';
// Standard Image
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
/>
// Image with custom placeholder content
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
PlaceholderContent={<ActivityIndicator />}
/>
Source: react native elements
I use this plugin. It is very comprehensive https://github.com/magicismight/react-native-lazyload