I am using Sanity and React to create a blog page. Everything seems to be okay but when you click on a blog to read more I get the error message "Error: Unable to resolve image URL from source (null)" What could be the issue? Below is part of my OnePage.js page where console shows there's an error
</h2>
<div className="flex justify-center text-gray-800">
<img
src={urlFor(postData.authorImage).url()}
className="w-10 h-10 rounded-full"
alt=""
/>
It looks like authorImage in this case is null, meaning the author doesn't have an image. To prevent this from happening, you can check whether or not the author has an image before rendering the image tag. In other words, something like this:
</h2>
<div className="flex justify-center text-gray-800">
{postData.authorImage && (
<img
src={urlFor(postData.authorImage).url()}
className="w-10 h-10 rounded-full"
alt=""
/>
)}
Instead of passing it before the image element, you can pass the operator in the inside the src`
<div className="flex justify-center text-gray-800">
<img
src={urlFor(postData.authorImage && postData.authorImage ).url()}
className="w-10 h-10 rounded-full"
alt=""
/>
</div>
`
Related
I've been writing Nextjs for a while but some of the image components are still in <img> tag like this. (based on TailwindCSS)
<div className="relative">
<div className="absolute inset-0 flex flex-col" aria-hidden="true">
<div className="flex-1 bg-transparent" />
<div className="w-full flex-1 bg-black" />
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-6">
<img
className="relative rounded-lg"
src="/images/somephoto.png"
alt="screenshot"
/>
</div>
</div>
The current code shows the image in the center of the page with a relative position.
I've tried to convert the tag into the Next <Image /> component though it is hard to keep the styling since we need to specify width and height.
I would like to know the conversion tips between <img> and Next <Image> if any. (Appreciate it if you have an idea for the above case example)
As your current code is working correctly without adding any additional staying to the img tag, you can just replace it with the <Image /> component from next.js
<div className="relative">
<div className="absolute inset-0 flex flex-col" aria-hidden="true">
<div className="flex-1 bg-transparent" />
<div className="w-full flex-1 bg-black" />
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-6">
<Image
loader={myLoader}
src="me.png"
alt="Picture of the author"
layout='fill'
/>
</div>
</div>;
This question already has answers here:
Missing "key" prop for element. (ReactJS and TypeScript)
(2 answers)
Closed 5 months ago.
This is my portfolio web app, i have made different components but when i am trying 'npm run build' it gives the following error : Missing "key" prop for element in iterator, can anyone please help me out i tried adding but it still says same
the code:
import React from 'react'
import {motion} from 'framer-motion'
import { Project } from '../typings';
import { urlFor } from '../sanity';
import Image from 'next/image'
type Props = {
projects: Project[]
}
function Projects({ projects }: Props) {
return (
<div className='h-screen relative flex overflow-hidden flex-col text-left md:flex-row max-w-full justify-evenly mx-auto items-center z-0'>
<h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
Projects
</h3>
(((error on this line)))) <div className=' relative w-full flex overflow-x-scroll overflow-y-hidden snap-x snap-mandatory z-20 scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#f7ab0a]/80'>
{projects?.map((project, i) => (
<div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
<motion.img
initial={{
y: -300,
opacity: 0,
}}
transition={{ duration: 1.2}}
whileInView= {{ opacity: 1, y: 0}}
viewport= {{ once: true}}
src={urlFor(project?.image).url()} alt='' />
<div className='space-y-10 px-0 md:px-10 mx-w-6xl'>
<h4 className='text-4xl font-semibold text-center'>
<span className='underline decoration-[#f7ab0a]/50'>Case Study {i+1} of {projects.length}:</span> {''}
{project?.title}
</h4>
<div className='flex items-center space-x-2 justify-center'>
{project?.technologies.map((technology) => (
<Image className='h-10 w-10'
key={technology._id}
src={urlFor(technology.image).url()}
alt=''
/>
)
)}
</div>
<p className=' text-lg text-center md:text-left'>
{project?.summary}
</p>
</div>
</div>
))}
</div>
<div className=' w-full absolute top-[30%] bg-[#f7ab0a]/10 left-0 h-[500px] -skew-y-12'/>
</div>
)
}
export default Projects
Api is giving full response, website running fully functional on localhost 3000
Keys are used to help the renderer determine what has been updated/changed. The first JSX element inside a map should always contain a key. The index of an array makes for an easy map, however this can be problematic if your array will be changing.
Assuming this is not the case, you can use the element's index in the array as a key. To do so, change the line that reads
<div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
to the following:
<div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen' key={i}>
If your elements may be changing, a better solution would be to have a unique ID for each project. This ID could then be used as the key.
Read more about keys here.
I'm trying to figure out how to add an animation on the next elements. I was trying some stuff but didn't figure it out due the fact that I recently started to learn React.
<div className="gradient2">
<div className="grid grid-rows-3 stoljpi-metci grid-flow-col">
<div className="font-bold text-white pl-1.5 bojaTexta"> {metciTren}</div>
<div className="font-bold text-gray-400 -mt-1"> {clipMetci}</div>
</div>
<>
--Anim should go here, I want the className='slikea' to be animated, like slideIn
<div className='slikea'>
<img className="stoljpi mt-1" src={`${process.env.PUBLIC_URL}/images/${state}.png`} />
</div>
</>
</div>
I'm currently using tailwind css as a beginner.
What i am trying to do is to have a 2 element on top of each other with the same width but different pixel size.
What i have now is.
If you can't get what i'm trying to do, you can check the attached file.
<div className="w-full h-screen">
<div className="max-w-[1500px] px-4 mx-auto h-full">
<div className="flex h-[700px] ">
<div className="w-[1000px] flex flex-col justify-start">
<div className="">
<h1 className="w-full font-bold inline border-y-2 ">
The moon is made
</h1>
</div>
<p className="text-[100px] font-bold ">
of
<span className="primary-bg text-[100px] font-bold inline">
Pancakes.
</span>
</p>
</div>
<div className="w-[500px]">qwe</div>
</div>
</div>
</div>
And i wanted to achieve is this.
You can do that by choosing the right font-size for every text because the width is depending on the font size
I tried to copy the image you provided and made it as simple as I can
check it here : https://play.tailwindcss.com/H4pBcGRvag
I want to redirect to a totally different url with my Link component (from react-router-dom), but instead, it just adds those characters to my current url.
For example, if I click this Link being on "http://localhost:3000/pin-detail/5HHceZ3LuAltt4AEKn2LYc"
<Link to={`user-profile/${pinDetail.postedBy?._id}`} className='flex gap-2 m5-5 items-center bg-white dark:bg-darkg rounded-lg mt-2'>
<img src={pinDetail.postedBy?.image} alt="user-profile" className='w-8 h-8 rounded-full object-cover' />
<p className='font-semibold capitalize dark:text-white'>{pinDetail.postedBy?.userName}</p>
</Link>
It goes to "http://localhost:3000/pin-detail/5HHceZ3LuAltt4AEKn2LYc/user-profile/104293279805278412025". I want that the link redirects me to "localhost:3000/user-profile/${pinDetail.postedBy?._id".
How can I do that?
You need to add a / before as saied on comment by Matt, like this
<Link to={`/user-profile/${pinDetail.postedBy?._id}`} className='flex gap-2 m5-5 items-center bg-white dark:bg-darkg rounded-lg mt-2'>
<img src={pinDetail.postedBy?.image} alt="user-profile" className='w-8 h-8 rounded-full object-cover' />
<p className='font-semibold capitalize dark:text-white'>{pinDetail.postedBy?.userName}</p>
</Link>