Unhandled Runtime Error Error: Invalid src prop on `next/image`, hostname

Chia sẻ với ae một vấn đề xử lý khi bị lỗi như sau, trong Next.js 13. Cách xử lý cũng khá đơn giản, lỗi này báo do url hình ảnh của ta chưa một hostname khác, nên chúng ta cần phải khai báo nó trong `next.config.js`

Unhandled Runtime Error

Error: Invalid src prop (https://cdn.dummyjson.com/product-images/1/thumbnail.jpg) on `next/image`, hostname "cdn.dummyjson.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Fix lỗi : hãy mở tệp next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
    images: {
        remotePatterns: [
          {
            protocol: 'https',
            hostname: 'cdn.dummyjson.com',
            port: '',
            pathname: '/product-images/**',
          },
        ],
      },
}

module.exports = nextConfig

Sửa xong rồi thì run lại ứng dụng xem nhé

Bài Viết Liên Quan

Messsage

Nếu bạn thích chia sẻ của tôi, đừng quên nhấn nút !ĐĂNG KÝ