我有问题与我的图像src在next.js

Question

我在我的项目中使用Sanity图像url，我在控制台页面中得到这个错误，上面说

next-dev.js吗?3515:25警告:道具src不匹配。

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

客户:"https://cdn.sanity.io/images/jbcyg7kh/undefined/4f6d8f5ae1bed2647201bfcaed2f270897b92306 - 800 x533.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;

Answer 1

看起来urlBuilder从sanityClient构建URL构建器。根据url的模式判断，

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

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

可以看到服务器设置了process.env.NEXT_SANITY_DATASET，而客户端没有。您可以按照下面的步骤添加这个环境变量。