Hello. Spider. Did u import next/image?

yes

do you see any error in the terminal and console

import Image from "next/image";

This is my error.

this looks like a differnet component which is having an issue

are you using that url to store images?

yes

ok so you need to define them in the next confic

/** @type {import('next').NextConfig} /

const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: "https",
hostname: "lh3.googleusercontent.com",
port: "",
pathname: "",
},
],
},
};

export default nextConfig;

This is my nextConfig code.

remotePatterns: [
{
protocol: 'https',
hostname: '**',
port: '',
},
],

can you try this

i want to make sure its not an issue with next config

it makes it so anything after https:// is allowed

This is what error?

I can't upload from local public folder using Image in Nextjs.

<div className="mt-12 mb-6">
<Image
src={
"/images/775.jpg"
}
width={760}
height={448}
alt="Landing"
/>
</div>

What's your next/image module version?

Please share your package.json.

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"lucide-react": "^0.314.0",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}

This is my package.json.

can you show us the code the whole component

not just the image component

import ImageCard from "../common/ImageCard";
import { imageList } from "@/config";

const CarStanding = () => {
return (
<div className="bg-[#F9F9F9] mx-[-112px] pb-[104px]">
<div className="mx-[112px]">
<div className="pt-[104px] pb-[24px] font-[600] text-[34px]">
Other Articles You May Like
</div>
<div className="flex justify-between">
{imageList.map((image, idx) => (
<ImageCard key={idx} {...image} />
))}
</div>
</div>
</div>
);
};

export default CarStanding;


----------------imageList ----------------------------------

export const imageList = [
{
image:
"/images/rect-1.png",
title:
"The US President wants half of all new vehicles to be zero emissions by 2030",
value:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sit elit consectetur aliquam...",
id: 0,
},
];

---------------------------------------ImageCard ----------------------------------------

'use client';
import Image from "next/image";

interface SelectProps {
image: string;
title: string;
value: string;
}

const ImageCard: React.FC<SelectProps> = ({ image, title, value }) => {
return (
<div className="flex flex-col">
<div>
<div
style={{
backgroundImage: url("/icon/rect-back.png"),
width: "382px",
height: "223px",
}}
className="flex items-center justify-center relative"
>
<Image src={image} alt="Car Image" fill sizes="100%" />
</div>
</div>

);
};

export default ImageCard;