I am using NextJs for my website. Here is the code I'm using for showing Images
<Image
src={`/p1.png`}
layout={"fill"}
objectFit="contain"
objectPosition="center"
alt={"publication image"}
/>
This image is visible on all browsers except Safari. How can I make it visible on Safari as well? Thanks in advance
I got the issue fixed. The image container did not have position set as relative
Related
I'm building a website with Next.js and Mantine. I want to put the Image with my logo in my Header so I used Image from next/image but the problem is that it's not working when i deploy it. It works perfectly on localhost.
Deployed:
Locally:
Code of my image that is clickable
`
<Link href={"/"} >
<Image src="https://cdn.p33t.net/ZKAVDSZEFH.png" alt='logo' width={42} height={40} />
</Link>
`
I tried using the local image but it was same. My image host is already added in the next config.
I expected it to be working same as on local machine
I fixed it by using Image component by Mantine instead of Next
I'm using next/image for my images on my site. All my images are being served through prismic and I've added the cdn domain to my next.config file.
This is how I'm using the component
<Image
src={image}
alt={title}
width={600}
height={450}
layout="responsive"
loading="eager"
/>
Every image is loading perfect, except for one. I'm getting a 404 despite all the images coming from the same source. When I replace next/image with a normal img tag it works fine. I'm not sure how to debug this. Any advice.
I am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.
My problem is that the SVG image doesn't display using Image tag from Next.js.
I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.
My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.
I know this is a bit old but stumbled across this post
I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely
Next Cloudinary: https://next-cloudinary.spacejelly.dev/
Given an asset cloudinary-logo-blue that's uploaded as an SVG:
<CldImage
width="500"
height="96"
src="cloudinary-logo-blue"
format="svg"
/>
Hope this helps!
I've checked several similar topics in Stackoverflow but I didn't find my answer.
I have this component which is meant to show profile images in my app. I am serving images in my node server and it works just fine in the browser. It means when I open the link with the browser image is shown in my browser. it also works fine with my react web app.
in the react native app it is not shown, though.
I tested some other links from different sources and it works fine.
But the image links from my API end does not work in the react native.
<Image source={{
uri: 'https://mentalwill.xyz/API/ProfileImages/21190169ANDREW-NG.jpg' ,
}} style={styles.profileImage} />
and the style:
profileImage:{
width: 200,
height:200,
borderRadius:100,
marginTop:50
}
Am facing a issue with ionic. here, how to load gif image in <image src="icon.gif"> in a html page.
its working in browser but not in mobile or device.
can any one help me.
You only need to put the following HTML tag with the complete URL of your GIF image:
<img ng-src="{{yourGifURL}}" alt="Description" />
Make sure you using the file name as case sensitive like 'loading.gif' or 'Loading.gif'.
And also use the <img src="">
I was having a similar issue.