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.
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
So there is a folder named "images" in Public.
The funny thing is it was working fine until I uploaded it on github pages, and then when I refreshed, it just broke. The images don't load either on the github pages or on local anymore.
<img src= "images/equilibrium.jpg" alt="equilibrium background" />
Just add / at the beginning of source url.
<img src="/images/equilibrium.jpg" alt="equilibrium background" />
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
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to :
<img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src={charlie1} />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
{
"homepage": "https://xyz.github.io/charlieReact"
}
App.js
<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />
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.