警告:提供的‘The’属性是不支持的类型ImageUrlBuilder。在这里使用此值之前，必须将该值强制为字符串。

Question

我正在尝试用教程构建一个有理智和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，或者创建额外的图像以匹配其他产品的额外照片数。