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

x

Xin chào! Hãy ủng hộ chúng tôi bằng cách nhấp vào quảng cáo trên trang web. Việc này giúp chúng tôi có kinh phí để duy trì và phát triển website ngày một tốt hơn. (Hello! Please support us by clicking on the ads on this site. Your clicks provide us with the funds needed to maintain and improve the website continuously.)

Ngoài ra, hãy đăng ký kênh YouTube của chúng tôi để không bỏ lỡ những nội dung hữu ích! (Also, subscribe to our YouTube channel to stay updated with valuable content!)

Đăng Ký