Next.js v13 cannot get external image

Developers Cloudflare Pages
1

I have a Next.js v13 project in Cloudflare Pages.
However, the external source image is showing as 404 in the Preview environment.
Does anyone know the cause of the problem?
The external source images are retrieved using getServersideProps in index.tsx.
The version of node.js is 16.19.0.

Below are the details and code.

package.json

{
  "name": "sample-nextjs-13-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.0.7",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "eslint": "8.30.0",
    "eslint-config-next": "13.0.7",
    "next": "13.0.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  }
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    runtime: 'experimental-edge',
  },
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.dog.ceo',
        port: '',
        pathname: '/breeds/**',
      },
    ],
  },
};

module.exports = nextConfig;

index.tsx

import Head from 'next/head';
import Image from 'next/image';
import { Inter } from '@next/font/google';
import styles from '../styles/Home.module.css';

const inter = Inter({ subsets: ['latin'] });

type Props = {
  message: string[];
  status: string;
};

export default function Home(data: Props) {
  return (
    <>
        <h2>Dog Images🐶</h2>
        <div className={styles.grid}>
          {data.message.map((dog, index) => {
            return (
              <Image key={index} src="dog" alt="dog" width={200} height={200} />
            );
          })}
        </div>
      </main>
    </>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch('https://dog.ceo/api/breeds/image/random/3');
  const data = await res.json();

  return { props: data };
};

The fetched image data is returned as json data, for example, as shown below.

{
  "message":[
    "https:\/\/images.dog.ceo\/breeds\/pinscher-miniature\/n02107312_5987.jpg",
    "https:\/\/images.dog.ceo\/breeds\/papillon\/n02086910_7868.jpg",
    "https:\/\/images.dog.ceo\/breeds\/terrier-lakeland\/n02095570_2872.jpg"
  ],
  "status":"success"
}