nextjs中使用image图片

  1. 使用nextjs的组件:

    javascript 复制代码
    import Image from "next/image";
    
    <Image src="xxx" alt="图片" width={300} height={300} />
  2. 加入允许跨域:
    在next.config.js中加入

    javascript 复制代码
    const nextConfig = {
        images: {
            domains: ["images.doc.ceo"]
        }
    }
    
    module.exports = nextConfig;

不然会出现:Error: Invalid src prop (https://images.dog.ceo/breeds/terrier-westhighland/n02098286_617.jpg) on next/image', hostname "images.dog.ceo"is notconfigured under images in your next, config.jsSee more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

相关推荐
刚子编程4 天前
Ubuntu 22.04 Docker 从零部署全栈项目实录:Next.js + FastAPI + PostgreSQL 一次跑通
fastapi·nextjs·docker部署·全栈开发·ubuntu22.04
CSharp精选营5 天前
Ubuntu 22.04 Docker 从零部署全栈项目实录:Next.js + FastAPI + PostgreSQL 一次跑通
fastapi·nextjs·docker部署·全栈开发·ubuntu22.04
Zacks_xdc2 个月前
【运维】Nginx 蓝绿部署与流式任务(SSE)不中断架构实战
运维·nginx·架构·nextjs
桂云网络OSG3 个月前
破局企业数字化转型:桂云网络发布“桂花”数字化底座,重新定义企业级阅签与安全边界
数字化·nextjs·antd·数字化底座
小牛itbull3 个月前
告别传统主题开发!ReactPress Theme Starter —— 用 Next.js 15 构建现代化无头博客
javascript·cms·react·wordpress·nextjs·reactpress·blog-theme
任磊abc4 个月前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
任磊abc4 个月前
nextjs配置端口以及不同的环境变量
react·nextjs·配置开发端口·打开默认浏览器
jingling5554 个月前
自建技术博客实战(三):工具专栏——地图定位、声音复刻与 rembg 抠图
android·开发语言·前端·ai·nextjs
低代码布道师5 个月前
赋予数据形态:从 API 到 UI,构建状态驱动的后台页面
ui·nextjs
低代码布道师5 个月前
注入灵魂:从架构设计到数据能力的“降维打击”
nextjs