使用Next.js框架的Image组件可以显示并优化远程图像。若直接使用远程图像地址,会导致服务器错误,提示需配置允许的远程图像主机。在Next.js配置文件中,添加images配置对象,包括domains数组来指定允许的远程主机名。也可使用remotePatterns进行更详细的配置,包括允许的协议和主机名。配置完毕后重启开发服务,优化后的远程图像在浏览器中显示,并将原始大小从2.2MB减少至68KB。
使用Next.js框架的Image组件可以显示并优化远程图像。若直接使用远程图像地址,会导致服务器错误,提示需配置允许的远程图像主机。在Next.js配置文件中,添加images配置对象,包括domains数组来指定允许的远程主机名。也可使用remotePatterns进行更详细的配置,包括允许的协议和主机名。配置完毕后重启开发服务,优化后的远程图像在浏览器中显示,并将原始大小从2.2MB减少至68KB。