Javascript Next.js无法从外部本地主机获取图像

'use client'

import Image from 'next/image'

export default function Home() {
    return (
        <div className='flex items-center justify-center min-h-screen'>
            <Image
                src={'http://localhost:8081/api/image/get/1'}
                alt='image'
                width={200}
                height={200}
            />
            Hello world!!!
        </div>
    )
}

/** @type {import('next').NextConfig} */
const nextConfig = {
    image: {
        remotePatterns: [
            {
                protocol: 'http',
                hostname: 'localhost',
                port: '8081',
                pathname: '/api/image/get/**',
            },
        ],
    },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'http',
                hostname: 'localhost',
                port: '8081',
                pathname: '/api/image/get/**',
            },
        ],
    },
}

export default nextConfig

Javascript相关问答推荐

Express.js：使用Passport.js实现基于角色的身份验证时出现太多重定向问题

react/redux中的formData在expressjs中返回未定义的req.params.id

InDesign—创建一个独立的窗口，在文档中进行更正时保持打开状态

如何将Openjphjs与next.js一起使用？

显示图—如何在图例项上添加删除线效果？

如何在每次单击按钮时重新加载HighChart/设置HighChart动画？

这个值总是返回未定义的-Reaction

Angular 形式，从DOM中删除不会删除指定索引处的内容，但会删除最后一项

自定义确认组件未在vue.js的v菜单内打开

如何使用基于promise (非事件emits 器)的方法来传输数据？

删除加载页面时不存在的元素(JavaScript)

如何访问此数组中的值？

未捕获语法错误：Hello World中的令牌无效或意外

我不知道如何纠正这一点.

MUI迷你图：如何将$符号添加到MUI迷你图中的工具提示数据

$GTE的mongoose 问题

我们是否可以在reactjs中创建多个同名的路由

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意？

在AgGrid中显示分组行的单元格值

为什么我的InDesign Java脚本不能完全工作？