Nextjs Image component wont load my images, I've tried everything I've come across still nothing.
<div>
{output?.map((item) => (
<div>
{console.log(`${apiUrl}${item.localImage}`)}
<Image
loader={(item) => {
return `${apiUrl}${item.localImage}`;
}}
alt={item.title}
src={`${apiUrl}${item.localImage}`}
layout="fill"
objectFit="contain"
// height={98}
// width={77}
/>
</div>
))}
</div>
The console.log shows the correct image location.
http://localhost:3030/images/b/Painting-with-Both-Hands--Sophie-Walbeoffe.jpg
http://localhost:3030/images/b/DK-The-History-Book.jpg
http://localhost:3030/images/b/Cradle-to-Cradle--(Patterns-of-Life).jpg
http://localhost:3030/images/b/Upstarts.jpg
I have added localhost to next.config.js with the port and without. I think its something to do with the loader.
So what is missing?
I think you can change the code for the loader to:
loader={() => {
return `${apiUrl}${item.localImage}`;
}}
Related
I am trying to implement Cookiebot on my NextJs Website.
The docs (Link to docs) mention to insert the script for the cookie declaration inside the HTML of the specific page, for me it is an own subpage only for the cookie declaration.
If I use the HTML element <script ... /> as mentioned in the docs, the text does not load when I switch to the page, but only after a refresh once I'm on the page.
If I use the NextJs Script component Link to docs by switching the <script ..> to and import it from next/script, the cookie declaration loads instantly as expected, but it is placed below everything else of the page, even under the footer (even though i wrap the pages inside a layout with footer).
My code for the layout looks like following:
`
function BasePage(props: IBasePageProps) {
return (
<div>
<Navbar />
<main>{props.children}</main>
<Footer />
</div>
);
}
This works for every page and everything - the pages are all between the Navbar and Footer. However if I use following code for the page of the screenshot, the <Script .../> text is loaded below the footer.
export default function CookieRichtlinie() {
return (
<>
<h1 className="pb-8 mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
Cookie Richtlinie
</h1>
<div id="CookiePolicyText">
<Script
id="CookieDeclaration"
src="https://consent.cookiebot.com/12345/cd.js"
type="text/javascript"
async
/>
</div>
</>
);
`
After googling for two days I couldn't find any issue or thread close to this problem. Someone experienced this or know what I could try?
<Script ...> below everything else
Placed <Script ...> tag of next/script anywhere possible to get the loaded text inside the page. Expected to have the result of the script in the placed component, however it is always at the bottom of the page.
Did some global searches in Github and found an useEffect workaround, made some modifications and this worked in my case.
useEffect(() => {
const cookieBotWrapper = document.getElementById("CookiebotDeclaration")
if (cookieBotWrapper) {
const script = document.createElement("script")
script.id = "CookieDeclaration"
script.type = "text/javascript"
script.async = true
script.src = `https://consent.cookiebot.com/${process.env.NEXT_PUBLIC_COOKIEBOT_DOMAIN_GROUP_ID}/cd.js`
cookieBotWrapper.appendChild(script)
}
}, [])
return (
<main>
{process.env.NODE_ENV !== "development" && (
<div id="CookiebotDeclaration" />
)}
</main>
)
On Next 13, after replacing <img for <Image, the image requests never loads.
Its a Magento image, coming from the product.
However, Magento's server never receives the GET request from next for the image.
For example:
http://localhost:3000/_next/image?url=https%3A%2F%2Fmagento2.magenteiro.com%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Fcb2ae50ad1efe9ed2d45d11fc48a28dc%2Fl%2Ft%2Flt01.jpg&w=3840&q=75/
I can decode 2 URL's from here:
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg&w=3840&q=75
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg
Both would load an image from the remote server, but next never got there.
Am I missing something?
# next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {appDir: true},
images:{
domains: ['www.floatui.com', 'magento2.magenteiro.com', 'source.unsplash.com']
}
}
module.exports = nextConfig
Part of my productList.jsx component:
{products.map((product) => (
<>
<a key={product.url_key} href={product.url_key} className="group">
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
<Image
src={product.image.url}
alt={product.image.label}
title={product.image.label}
fill={true}
className="h-full w-full object-cover object-center group-hover:opacity-75"
/>
</div>
<h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
<p className="mt-1 text-lg font-medium text-gray-900">$ {product.price_range.minimum_price.final_price.value}</p>
</a>
{product.image.url}
</>
))}
In another attempt to figure this out, I served my /public/images directory with php server, and replaced src="http://localhost:4444/produto2.jpg".
I could confirm that next called the URL, but it never finishes loading the image.
If I add unoptimized={true} forcing Image to request the original image, then it works.
It seems to be a bug on Next in some version between 13.0.0 and 13.0.2.
I started a new project and it worked. The new project was using Next 13.0.3.
So, upgrading Next.js (npm i next#13.*) solved the problem for me.
Note that by doing this, you will be changing your constraint, and newer versions of Next.js 13 may be installed on your system.
I'm using swiper version 6 and using lazy loading. Therefore, trying to use swiper lazy preloader and it disapper before image fully loaded.
Can someone help me?
Thanks for read this question.
<RefSwiper
ref={gallerySwiperRef}
onSlideChange={e => handleSlideChange(e.activeIndex)}
controller={{ control: secondSwiper }}
lazy={true}
loadPrevNext={true}
preloadImages={false}
onSwiper={setFirstSwiper}
>
<Main>
{data.map((e, index) => (
<SwiperSlide key={`${e}_${index}`}>
<ImageContainer isDesktop={isDesktop} isTab={isTab}>
<Image
src={`${process.env.NEXT_PUBLIC_WEB_HOST}/${e.attachments_path}/${e.attachments_name}`}
onClick={handleTab}
alt='image'
layout='fill'
className='swiper-lazy'
/>
</ImageContainer>
<div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</SwiperSlide>
))}
</Main>
</RefSwiper>
If you need more code, let me know.
How do I troubleshoot this problem this deployment issue? I am following this tutorial. My node_modules and .next are ignored and not pushed to github. It works locally but can't seem to deploy. I have supplied both the component code as well as the page it's exported on. Let me know if you can see what I am missing.
https://www.youtube.com/watch?v=V4SVNleMitE
deployment errors
Error occurred prerendering page "/components/BlogPosts". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'fields' of undefined
at BlogPosts (/vercel/path0/.next/server/chunks/130.js:39:12)
at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:673:46)
at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:315:51)
at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:645:16)
at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)
component blog posts
export default function BlogPosts({post }) {
const {title, information,slug , thumbnail} = post.fields
return (
<div>
<div className='container w-50 h-25 mt-4'>
<Image
className='nav'
src={'https:' + thumbnail.fields.file.url}
width={thumbnail.fields.file.details.image.width}
height={thumbnail.fields.file.details.image.height}
/>
</div>
<div>
<div>
<h4 className=''>{title}</h4>
<Link href={'/contentslug/' + slug}>
<a className='btn btn-primary text-white'>Read more</a>
</Link>
</div>
</div>
</div>
)
}
Pages/Posts
import {createClient} from 'contentful'
import BlogPosts from './components/BlogPosts'
import Nav from './components/Nav'
import Logo from './components/Logo'
export async function getStaticProps() {
const client = createClient({
space: process.env.NEXT_PUBLIC_CONTENTFUL_ID,
accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_TOKEN,
})
const res = await client.getEntries({content_type: 'posts'})
return {
props: {
posts: res.items ,
revalidate: 1
}
}
}
export default function Home({posts}) {
console.log(posts);
return (
<div>
<Logo/>
<Nav/>
<div className="container text-center display-5">
{posts.map(post => (
<BlogPosts key={post.sys.id} post={post}/>
))}
</div>
</div>
)
}
You have fields of undefined. this might be caused because of some strange deploying behavior if you are 100% sure your code works.
How to fix (probably):
Build your project locally. if it works, follow the next step
Comment your code in BlogPosts, inside the exported component. The code must work, so your exported component will be empty but working.
Push this code to Vercel.
Uncommit your code. (done at point 2)
Push again.
P.S. this behavior with API is sometimes caused because of API middleware you reworked.
My NextJS 12 App is stuck loading when the image provided doesn't exist, there is a way to solve that?
import Image from "next/image";
export default function Home() {
return (
<div>
<Image
src="/image_dont_exist"
alt="Image don't exist"
width={400}
height={400}
objectFit="cover"
/>
</div>
);
}
The page just keep loading forever