我检查了我的源代码和一切。看起来不错！但问题只出现在使用下一个Js图像标记时。因此，创建模式与健全，然后构建客户端和url构建器，导入客户端和构建器到文件...我不知道问题是否来自那里，但它是一个问题，没有人解决在过去，我终于面对它。问题不显示在您的代码编辑器。仅在Web浏览器中显示
下面是代码和屏幕截图：

健全架构Schema for the city image

export default {
  name: "cities",
  title: "Cities",
  type: "document",
  fields: [
    {
      name: "cityImage",
      title: "City Image",
      type: "image",
      options: { hotspot: true },
    },
    {
      name: "cityName",
      title: "City Name",
      type: "string",
    },
  ],
};

生成客户端和url生成器Client and ImageUrlBuilder to get url from the backend

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

export const client = sanityClient({
  projectId: "xxxxxxx",
  dataset: "xxxxxxxx",
  apiVersion: "xxxxxxxxx",
  useCdn: true,
  token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
  ignoreBrowserTokenWarning: true,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

主要问题出现在此处：No error in code editor

<div>
            <input
              onChange={(e) => setSearch(e.target.value)}
              className={Styles.searchInput}
              type="text"
              placeholder="Search your city..."
            />
            <ul className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 text-center">
              {cityData
                .filter((city) => {
                  return search === ""
                    ? city
                    : city.cityName.toLowerCase().includes(search);
                })
                .map((city, i) => (
                  <li key={i} className={Styles.cityList}>
                    <Image
                      src={urlFor(city.cityImage && city.cityImage).url()}
                      alt=""
                    />
                    {city.cityName}
                  </li>
                ))}
            </ul>
          </div>

浏览器中的最终输出enter image description here

我尝试了所有可能的方法来修复它，但没有结果，看起来像是sanity或next js的bug。另外，我也检查了我的package.json文件。一切正常

这是我的包裹.jsonenter image description here

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@lottiefiles/lottie-player": "^1.6.3",
    "@portabletext/react": "^2.0.1",
    "@sanity/client": "^3.4.1",
    "@sanity/image-url": "^1.0.2",
    "next": "latest",
    "next-sanity": "^4.1.2",
    "next-sanity-image": "^5.0.0",
    "react": "18.2.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.4.0",
    "react-icons": "^4.6.0",
    "react-lottie-player": "^1.5.4",
    "swiper": "^9.0.3"
  },
  "devDependencies": {
    "@types/node": "18.11.3",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4",
    "typescript": "4.8.4"
  }
}