<img> to <Image /> converting
Answered
NanotechPikachu posted this in #help-forum
Hi. I am trying to convert my <img /> to <Image /> of nextjs but the prblm is when I put a link from another domain to the src, it errors. Please tell me how to rectify this and convert the following code of <img /> to <Image />
<div className="h-48 w-44">
<img src={m.image} alt="Anime pic" style={{ width: '224px', height: '250px', objectFit: 'contain', float: 'left' }} />
</div>Answered by nxtintime
In production you might use something like this for external Image use
module.exports = {
images: {
formats: ['image/webp', 'image/avif'],
remotePatterns: [
{
protocol: 'https',
hostname: 'gogocdn.net',
pathname: '/images/**'
}
]
}
}59 Replies
@NanotechPikachu Hi. I am trying to convert my <img /> to <Image /> of nextjs but the prblm is when I put a link from another domain to the src, it errors. Please tell me how to rectify this and convert the following code of <img /> to <Image />
js
<div className="h-48 w-44">
<img src={m.image} alt="Anime pic" style={{ width: '224px', height: '250px', objectFit: 'contain', float: 'left' }} />
</div>
The error would clearly link to a page which would show instructions on how to fix the error
@Anay-208 The error would clearly link to a page which would show instructions on how to fix the error
Sry. That error was some days ago and I switched to <img> cuz of that hence I don't have link.
If possible, can ya share it? Thnx.
If possible, can ya share it? Thnx.
Uhhhh... Lemme try to fetch from vercel....
Aight
just a min
@NanotechPikachu Nvm. I forgot it was console error. Anyway, here it is
send link + instructions to reproduce the error on site
beause its working fine for me
Prod?
Can you share your next.config.js?
@Anay-208 beause its working fine for me
Uhhh that isn't the image. Check this link and u will see the small not loaded image icon
https://anidon.vercel.app/info?id=sword-art-online-ii
https://anidon.vercel.app/info?id=sword-art-online-ii
@Anay-208 beause its working fine for me
There are all <img/> tag
@nxtintime Can you share your next.config.js?
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;@Anay-208 Click to see attachment
U see the small thing towards the left of the image? That's the <Image /> all else are <img>
If u check console, u will see error
got it
its either a bug with code or nextjs
how does the src string look like ? (m.image)
@nxtintime how does the src string look like ? (m.image)
"https://cdn.gogo......" something like that
@Anay-208 its either a bug with code or nextjs
I used the Image like
<Image src={m.image} />
<Image src={m.image} />
@nxtintime Click to see attachment
It works cuz in normal <img /> the image is displayed and that's what u see in the pic sent by anay.
won't work
because the error is the uri
and I recommend you to use custom [loader](https://nextjs.org/docs/app/api-reference/components/image#loader) with Next image
try pasting in the url directly into the <Image />
@Anay-208 img also won
Works as u can see the pic below the corrupted pic cuz both url are same
So like
<Image
loader={m.image} // in my case right? Cuz i can't destructure the url as in docs
src="me.png"
alt="Picture of the author"
width={500}
height={500}
/>@nxtintime try pasting in the url directly into the <Image />
Idk the url exactly
It also doesnt work on dev locally right
@nxtintime It also doesnt work on dev locally right
Idk. I am directly testing on vercel.
@NanotechPikachu Idk the url exactly
you could log the url when iterating through "m".
Hmmm. Btw, when I checked Google in the midst, does nextjs allow external url in Image?
@NanotechPikachu Hmmm. Btw, when I checked Google in the midst, does nextjs allow external url in Image?
Yes, if you add it to next config
In production you might use something like this for external Image use
module.exports = {
images: {
formats: ['image/webp', 'image/avif'],
remotePatterns: [
{
protocol: 'https',
hostname: 'gogocdn.net',
pathname: '/images/**'
}
]
}
}Answer
@Anay-208 Yes, if you add it to next config
Now, that's the prblm.
So, my config will be like
So, my config will be like
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
export default nextConfig;Lemme check
When i had that issue, it would throw and tell me i cant use external images from that domain tho
It doesn't for me
Has to be something up with the Url since all banner images dont work on ur vercel site no matter which anime i pick
I will reply soon...
Now it works
or did u change it back to <img?
was it the config?
Answer to this problem
Changing the config of nextjs from default to this
Allowed me to access the image and works fine ...
Changing the config of nextjs from default to this
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'gogocdn.net',
pathname: '/images/**',
},
],
},
};
export default nextConfig;Allowed me to access the image and works fine ...
Thanks to nxtintime & anay for ur effort, time and help