警告：提供的 `src` 属性是不受支持的类型 ImageUrlBuilder。 在此处使用之前，必须将此值强制转换为字符串

Question

我正在尝试使用教程使用 Sanity 和 Nextjs 构建应用程序。 然而，当我执行npm run dev时，我在编译图像时遇到了这个错误，我已经删除了详尽的错误列表，但这里是：`

Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    at div
    at HeroBanner (webpack-internal:///./components/HeroBanner.jsx:16:3)
    at Home (webpack-internal:///./pages/index.js:16:3)
    at App (webpack-internal:///./pages/_app.js:17:3)
    at StyleRegistry (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\styled-jsx\dist\index\index.js:449:36)    
    at PathnameContextProviderAdapter (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\shared\lib\router\adapters.js:60:11)
    at AppContainer (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:289:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:325:57)
    at renderElement (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5) {
  page: '/'
}
Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    at div
    at HeroBanner (webpack-internal:///./components/HeroBanner.jsx:16:3)
    at Home (webpack-internal:///./pages/index.js:16:3)
    at App (webpack-internal:///./pages/_app.js:17:3)
    at StyleRegistry (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\styled-jsx\dist\index\index.js:449:36)    
    
Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    at div
    at HeroBanner (webpack-internal:///./components/HeroBanner.jsx:16:3)
    at Home (webpack-internal:///./pages/index.js:16:3)
    at AppContainer (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:289:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:325:57)
    at div
    at Body (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:612:21)
    at renderElement (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5) {
  page: '/'
}

`

我尝试了一下，但我不知道我应该做什么。 我仍然遇到同样的错误。 我无法以这种方式显示页面。

Answer 1

该错误是由于您试图导航到另一个没有附加图像的产品，而您选择了第一个产品的任何附加图像。 这会强制刷新页面显示不存在的产品附加图像，从而导致页面出错。 解决此问题的最佳选择是在页面重新加载时将所选图像的视图重置为 0 ，或者创建其他图像以匹配其他产品的额外照片数量。