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

相关推荐
吉吉安11 天前
Nextjs+Supabase
前端·nextjs·supabase·vercel
低代码布道师1 个月前
01Nextjs+shadcn 医疗预约系统搭建-初始化脚手架
nextjs·shadcn
wanfeng_092 个月前
stripe/paypal
react·ts·nextjs·paypal·stripe
PyAIGCMaster3 个月前
我的项目开发的一般流程,供交流
react·nextjs
叶常落5 个月前
感恩日记:记录生活中的美好时刻
nextjs
飞鸟malred6 个月前
nextjs入门
前端·react·nextjs
任磊abc9 个月前
nextjs15简要介绍以及配置eslint和prettier
eslint·nextjs·prettier·nextjs15
任磊abc10 个月前
nextjs+material UI实现换肤功能
nextjs·material ui·换肤
堂铭1 年前
NextJS多语言
前端·i18n·nextjs
Mebius19161 年前
开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具
前端·react.js·typescript·开源·github·tailwindcss·nextjs