next-cloudinary, upload 图片，图片无法预览选择

参考链接

• stackoverflow.com/questions/6…
• stackoverflow.com/questions/7…

环境关键字

Next.js, cloudinary, next-cloudinary, CldUploadWidget

错误报告

upload 图片，图片无法预览选择

error TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async imageOptimizer (D:\code\proj\ecommerce-admin\node_modules\next\dist\server\image-optimizer.js:521:29)
    at async cacheEntry.imageResponseCache.get.incrementalCache (D:\code\proj\ecommerce-admin\node_modules\next\dist\server\next-server.js:414:72)
    at async D:\code\proj\ecommerce-admin\node_modules\next\dist\server\response-cache\index.js:99:36 {
  cause: Error: read ECONNRESET
      at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20) {
    errno: -4077,
    code: 'ECONNRESET',
    syscall: 'read'
  }
}
  

原因分析

Next/Image 图片优化的问题。加个loader。

改写方法：

原来：

<Image fill className="object-cover" alt="Iamge" src={url} />

改为：

 <Image fill className="object-cover" alt="Iamge" src={url} loader={()=>url}/>

next.config.js 文件

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        port: '',
        pathname: '/dvdqwb2fh/**',
      },
    ],
  },
};

module.exports = nextConfig;