I am having issue with my image src in next.js

Question

I am using Sanity image url in my project and I am getting this error in my console page that says

next-dev.js?3515:25 Warning: Prop src did not match.

Server:"https://cdn.sanity.io/images/jbcyg7kh/production/4f6d8f5ae1bed2647201bfcaed2f270897b92306-800x533.jpg"

Client: "https://cdn.sanity.io/images/jbcyg7kh/undefined/4f6d8f5ae1bed2647201bfcaed2f270897b92306-800x533.jpg"

import sanityClient from "@sanity/client";
import  imageUrlBuilder  from "@sanity/image-url";

export const client = sanityClient({
    projectId:"projectId",
    dataset:process.env.NEXT_SANITY_DATASET,
    useCdn: true,
    apiVersion:"2022-05-13"
});

const builder = imageUrlBuilder(client)
  
export const urlFor= (source) =>builder.image(source)

import Link from "next/link";
import React from "react";
import { urlFor } from "../lib/client";

function Product({ product: { name, image, price, description, slug } }) {
  return (
    <div>
      <Link href={`/product/${slug.current}`}>
        <div>
          <img src={urlFor(image[0])} alt="" />
          <h4>{name}</h4>
          <p>₦{price}</p>
          <p>{description}</p>
        </div>
      </Link>
    </div>
  );
}

export default Product;

You have the use the `NEXT_PUBLIC_` prefix in your environment variable name to expose it to the browser. See [Environment variables not working (Next.JS 9.4.4)](https://stackoverflow.com/a/65799867/1870780). — juliomalves, May 15 '22 at 10:21

score 0 · Answer 1 · answered May 14 '22 at 13:07

It looks like the urlBuilder builds the URL builder from sanityClient. Judging by the pattern of the URLs,

Server:"https://cdn.sanity.io/images/jbcyg7kh/production/4f6d8f5ae1bed2647201bfcaed2f270897b92306-800x533.jpg"

Client:"https://cdn.sanity.io/images/jbcyg7kh/undefined/4f6d8f5ae1bed2647201bfcaed2f270897b92306-800x533.jpg"

You can see that server has process.env.NEXT_SANITY_DATASET set, while client does not. You can add this environment variable by following the steps here.

I am having issue with my image src in next.js

1 Answers1