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
Related
I am getting this error in
./styles/globals.css:4:0
Module not found: Can't resolve './${imagesat}image-hero-mobile.png'
Import trace for requested module:
./styles/globals.css
./pages/_app.tsx
I am using next js as framework this error is probally due to tailwindcss .
'./${imagesat}image-hero-mobile.png' this line of code is only in one file that is
import Head from "next/head";
import Image from "next/image";
import menuList, { menuListType, menuObjectType } from "./menu";
const imagesat = "/images/01introSectionPage/";
const clients = [
"client-audiophile.svg",
"client-databiz.svg",
"client-maker.svg",
"client-meet.svg",
];
const IntroSectionDropdown = () => {
return (
<> {/* <div className="right">
<div
className={`bg-[url('${imagesat}image-hero-mobile.png')] md:bg-[url('${imagesat}image-hero-desktop.png')] h-32 w-32 bg-no-repeat bg-cover`}
>
<span className="sr-only">Hero image</span>
</div>
<img
src={`${imagesat}image-hero-desktop.png`}
alt=""
className="hidden md:block"
/>
<img
src={`${imagesat}image-hero-mobile.png`}
alt=""
className="md:hidden"
/>
</div> */}
</>
);
};
export default IntroSectionDropdown;
If i commmet the #tailwind utilities; in globals.css then website goes on but without it tailwind is not complete.
Where i used the './${imagesat}image-hero-mobile.png' is commented the also getting error.
i had tried removing tailwind and reinstalled
i had cleard the next cache
I hope anyone has solution
REPO - https://github.com/Chandraprakash-Darji/frontend-mentor-challenges
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}`;
}}
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.
I'm working on an Ionic React Project and I would like to add an image (the square below) and a text next to the image ('Home'), in the same line & height, in the header of my app. I have trying different css styles but nothing works.
import React from "react";
import {
IonHeader,
IonTitle,
IonToolbar,
IonIcon,
IonMenuToggle,
IonButton,
IonButtons
} from "#ionic/react";
import { menuOutline } from "ionicons/icons";
const Header: React.FC = () => {
return (
<IonHeader>
<IonToolbar className="menu-header">
<IonButtons slot="start">
<IonMenuToggle>
<IonButton>
<IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
</IonButton>
</IonMenuToggle>
</IonButtons>
<IonTitle>
<img
src="../assets/imgs/logo.png"
alt="logo"
width="50"
height="50"
/>
Home
</IonTitle>
</IonToolbar>
</IonHeader>
);
};
export default Header;
Any help would be really appreciated. Thank you!
<div style="display:flex; align-items:center;"><img src="../assets/imgs/logo.png"
alt="logo"
width="50"
height="50"
/> Home<div>
I tried to search for the answer but I am not getting anything to solve it.
I am loading my image using require.context as you can see in the code but it's not getting loaded. It used to work perfectly before in previous versions of react js. Now I am using react version 17.0.1. There are no errors in the console. If I import the image and use it in the src it works fine. I have also tried to change the images with some previous images used in previous projects (using react version 16.x.x) which are working fine there. I am creating react app using npx-create-react-app. Path to image is correct as in case of incorrect path "module named xxx not found error occurs".
Current behavior:
Image not showing up instead alt value is showing up.
Desired behavior:
Image should show up instead of alt value.
import React, { Component } from "react";
import commonStyles from "../css/common.module.css";
import loginStyles from "../css/login.module.css";
import { TextField, Button, Paper, Typography } from "#material-ui/core";
class Login extends Component {
state = {
userName: "",
password: "",
error: "",
};
render() {
const images = require.context("../images", true);
return (
<div
className={`${loginStyles.root} d-flex justify-content-center align-items-center ${commonStyles.bg}`}
>
<Paper
classes={{
root: `${commonStyles.paper} mt-2`,
}}
elevation={3}
>
<div className={`${loginStyles.child}`}>
<div className={`d-flex justify-content-center align-items-center`}>
<img
src={images(`./Shahmeer.png`)}
alt={`Shahmeer Avenue Logo`}
width="100"
height="100"
/>
</div>
<Typography
classes={{
root: `font-weight-bold`,
}}
variant="h5"
gutterBottom
>
Login
</Typography>
<form noValidate autoComplete="off">
<TextField
classes={{
root: `${commonStyles.textField}`,
}}
onChange={(e) => this.handleChange(e)}
id={"userName"}
label={"User Name"}
variant="outlined"
error={this.state.error ? true : false}
helperText={this.state.error}
value={this.state["userName"]}
/>
<TextField
classes={{
root: `${commonStyles.textField}`,
}}
onChange={(e) => this.handleChange(e)}
id={"password"}
label={"Password"}
variant="outlined"
error={this.state.error ? true : false}
helperText={this.state.error}
value={this.state["password"]}
/>
<div className={`w-100 d-flex justify-content-end mt-2`}>
<Button variant="contained" color="primary">
Login
</Button>
</div>
</form>
</div>
</Paper>
</div>
);
}
}
export default Login;
snapshot of browser:
You should use the default property for the images:
<img
src={images(`./Shahmeer.png`).default}
alt={`Shahmeer Avenue Logo`}
width="100"
height="100"
/>