警告：提供的 `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 ，或者創建其他圖像以匹配其他產品的額外照片數量。